start final project

db.json

@@ -0,0 +1,22 @@
+{
+    "advertisement": [
+        {
+            "id":1,
+            "name":"Продаю голодного кота!",
+            "description":"Кот бегемот. Прокормить невозможно!",
+            "url":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqlWZ1N8qSUMB1HuqN6DjnXP_D5NRGNJ-W6zLZqP-Y9Q&s=10"
+        },
+        {
+            "id":2,
+            "name":"Продаю машину",
+            "description":"Не бита не крашена без пробега по РФ",
+            "url":"https://s0.rbk.ru/v6_top_pics/media/img/9/33/347054091401339.jpeg"
+        },
+        {
+            "id":3,
+            "name":"Продаю квартиру",
+            "description":"Центр города, с видом на море.",
+            "url":"https://hoff.ru/upload/medialibrary/11c/11cb47c1d2d4f248b7dde57f479f2d47.jpg"
+        }
+    ]
+}

package.json

@@ -4,15 +4,17 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "server": "json-server db.json",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
-    "info": "^1.0.0",
+    "json-server": "^1.0.0-beta.15",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.18.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -23,8 +25,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
-    "sass": "^1.99.0",
-    "sass-embedded": "^1.99.0",
     "vite": "^6.3.5"
   }
 }

src/App.jsx

@@ -1,29 +1,12 @@
-import styles from './styles/App.module.scss'
+import { RouterProvider } from "react-router-dom";
-import React, { useState, useCallback } from 'react'
+import { router } from './router'
-
+import Header from './components/Header/index'
-function CounterButton({label, onClick}) {
-    return (
-        <button onClick={onClick} className={styles.counter_button}>{label}</button>
-    )
-}
-function CounterDisplay({value}) {
-    return (<div className={styles.counter_display}>
-            Значение счетчика: <b>{value}</b>
-    </div>)
-}
 
 function App() {
-    const [counter,setCounter] = useState(0);
-    
-    const increment = () => setCounter(prev => prev + 1);
-    const decrement = () => setCounter(prev => prev - 1);
-    
 	return (
 		<>
-            <h2>Практика по созданию счетчика с колбэками</h2>
+            <Header />
-            <CounterButton label="Увеличить" onClick={increment} />
+			<RouterProvider router={router} />
-            <CounterButton label="уменьшить" onClick={decrement} />
-            <CounterDisplay value={counter} />
 		</>
 	)
 }

src/components/AdvList/index.jsx

@@ -0,0 +1,49 @@
+import styles from './index.module.css'
+import { useState, useEffect } from 'react'
+
+export default function() {
+    const [data,setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    
+    useEffect(()=>{
+        const controller = new AbortController();
+        const fetchData = async () => {
+            try {
+                const response = await fetch('http://localhost:3000/advertisement', {
+                    signal: controller.signal // Link the abort signal to the fetch request
+                });
+        
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+        
+                const result = await response.json();
+                setData(result);
+            } catch (err) {
+                if (err.name !== 'AbortError') {
+                    setError(err.message);
+                }
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+        return () => controller.abort();
+    },[]);
+    
+    return (
+        <>
+            <div className={styles.container}>
+            {data.map(item => <div key={item.id} className={styles.card}>
+                <h3>{item.name}</h3>
+                <div 
+                    className={styles.img}
+                    style={{backgroundImage: `url(${item.url})`}}>
+                </div>
+                <p>{item.description}</p>
+                </div>)}
+            </div>
+        </>
+    )
+}

src/components/AdvList/index.module.css

@@ -0,0 +1,27 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 10px;
+}
+.card {
+    min-width: 100px;
+    min-height: 200px;
+    /*border: 1px solid black;*/
+    border-radius: 10px;
+    box-shadow: 2px 2px 5px 2px black;    
+}
+.card h3 {
+    text-align: center;
+}
+.card p {
+    margin: 5px 10px;
+}
+.img {
+    width: 200px;
+    height: 200px;
+    border-radius: 5px;
+    background-size: cover;
+    background-position: center;
+    margin: 0 auto;
+}

src/components/Header/index.jsx

@@ -0,0 +1,17 @@
+import styles from './index.module.css'
+
+export default function() {
+    return (
+        <>
+            <header>
+                <nav>
+                    <ul className={styles.container}>
+                        <li><a href="/">Главная</a></li>
+                        <li><a href="/favorite">Избранное</a></li>
+                        <li><a href="/profile">Профиль</a></li>
+                    </ul>
+                </nav>
+            </header>
+        </>
+    )
+}

src/components/Header/index.module.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style: none;
+    column-gap: 1em;
+}

src/pages/Error.jsx

@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <>
+            <h1>Error</h1>
+        </>
+    )
+}

src/pages/Favorites.jsx

@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <>
+            <h1>Favorites</h1>
+        </>
+    )
+}

src/pages/Main.jsx

@@ -0,0 +1,12 @@
+import AdvList from '../components/AdvList/index'
+
+export default function() {
+    return (
+        <>
+        <h1>Main</h1>
+        <div>
+            <AdvList />
+        </div>
+        </>
+    )
+}

src/pages/Profile.jsx

@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <>
+        <h1>Profile</h1>
+        </>
+    )
+}

src/router.jsx

@@ -0,0 +1,28 @@
+import { createBrowserRouter } from 'react-router-dom'
+import MainPage from './pages/Main'
+import ErrorPage from './pages/Error'
+import FavoritePage from './pages/Favorites'
+import ProfilePage from './pages/Profile'
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <MainPage />,
+        errorElement: <ErrorPage />,
+        children: [
+            {
+                path: "/",
+                element: <MainPage />,
+                loader: async () => fetch("/api/dashboard-data"),
+            },
+        ]
+    },
+    {
+        path: "/favorite",
+        element: <FavoritePage />
+    },
+    {
+        path: "/profile",
+        element: <ProfilePage />
+    }    
+]);