create List,Filters

.eslintrc.cjs

@@ -2,20 +2,21 @@ module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
- 'eslint:recommended',
- 'plugin:react/recommended',
- 'plugin:react/jsx-runtime',
- 'plugin:react-hooks/recommended',
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:react/jsx-runtime",
+ "plugin:react-hooks/recommended",
  ],
- ignorePatterns: ['dist', '.eslintrc.cjs'],
- parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
- settings: { react: { version: '18.2' } },
- plugins: ['react-refresh'],
+ ignorePatterns: ["dist", ".eslintrc.cjs"],
+ parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+ settings: { react: { version: "18.2" } },
+ plugins: ["react-refresh"],
  rules: {
- 'react/jsx-no-target-blank': 'off',
- 'react-refresh/only-export-components': [
- 'warn',
+ "react/prop-types": "off",
+ "react/jsx-no-target-blank": "off",
+ "react-refresh/only-export-components": [
+ "warn",
  { allowConstantExport: true },
  ],
  },
-}
+};

package.json

@@ -16,7 +16,9 @@
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^9.1.0",
- "styled-components": "^6.1.8"
+ "react-router-dom": "^6.22.3",
+ "styled-components": "^6.1.8",
+ "uid": "^2.0.2"
  },
  "devDependencies": {
  "@types/react": "^18.2.66",

src/App.css

@@ -1,42 +0,0 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}

src/App.jsx

@@ -1,42 +1,18 @@
-import { useEffect, useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { useDispatch } from "react-redux";
-import { fetchCars } from "./redux/cars/operations";
-// import { selectCars } from "./redux/cars/carsSelectors";
+import { lazy } from "react";
+import { Route, Routes } from "react-router-dom";
+import { AppLayout } from "./components/AppLayout/AppLayout";
 
-function App() {
- const [count, setCount] = useState(0);
- const dispatch = useDispatch();
- // const cars = useSelector(selectCars);
- useEffect(() => {
- dispatch(fetchCars());
- }, [dispatch]);
+const HomePage = lazy(() => import("./pages/HomePage"));
+const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
 
+function App() {
  return (
- <>
- <div>
- <a href="https://vitejs.dev" target="_blank">
- <img src={viteLogo} className="logo" alt="Vite logo" />
- </a>
- <a href="https://react.dev" target="_blank">
- <img src={reactLogo} className="logo react" alt="React logo" />
- </a>
- </div>
- <h1>Vite + React</h1>
- <div className="card">
- <button onClick={() => setCount((count) => count + 1)}>
- count is {count}
- </button>
- <p>
- Edit <code>src/App.jsx</code> and save to test HMR
- </p>
- </div>
- <p className="read-the-docs">
- Click on the Vite and React logos to learn more
- </p>
- </>
+ <Routes>
+ <Route path="/" element={<AppLayout />}>
+ <Route index element={<HomePage />} />
+ </Route>
+ <Route path="*" element={<NotFoundPage />} />
+ </Routes>
  );
 }