Сделали многоуровневые списки

db.json

@@ -0,0 +1,55 @@
+{
+	"products": [
+		{
+			"id": 1,
+			"name": "Sneakers Red & White 2025",
+			"brand": "NIKE",
+			"price": 38.0,
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
+		},
+		{
+			"id": 2,
+			"name": "Sneakers Red & White 2025",
+			"brand": "NIKE",
+			"price": 38.0,
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
+		},
+		{
+			"id": 3,
+			"name": "Sneakers Red & White 2025",
+			"brand": "NIKE",
+			"price": 38.0,
+			"imageUrl": "./src/assets/images/sneakers-image.jpg"
+		}
+	],
+    "articles": [
+        {
+            "id": 1,
+            "title": "Статья 1",
+            "author": "Иванов Иван Иванович",
+            "createDate": "2020-01-15",
+            "content": "Основной текст статьи"
+        }
+    ],
+    "projects": [
+        {
+            "id":1,
+            "name": "Project 1",
+            "status": "work",
+            "description": "Very important!",
+            "tasks": [
+                {
+                    "id":1,
+                    "title":"Task 1",
+                    "description": "Описание задачи"
+                },
+                {
+                    "id":2,
+                    "title":"Task 2",
+                    "description": "Описание задачи 2"
+                }
+            ]
+        }
+    ]
+    
+}

package.json

@@ -1,29 +1,30 @@
 {
-  "name": "store-client",
+	"name": "store-client",
-  "private": true,
+	"private": true,
-  "version": "0.0.0",
+	"version": "0.0.0",
-  "type": "module",
+	"type": "module",
-  "scripts": {
+	"scripts": {
-    "dev": "vite",
+		"dev": "vite",
-    "build": "vite build",
+		"server": "json-server --watch db.json --port 8000",
-    "lint": "eslint .",
+		"build": "vite build",
-    "preview": "vite preview"
+		"lint": "eslint .",
-  },
+		"preview": "vite preview"
-  "dependencies": {
+	},
-    "react": "^19.1.0",
+	"dependencies": {
-    "react-dom": "^19.1.0",
+		"react": "^19.1.0",
-    "react-icons": "^5.5.0",
+		"react-dom": "^19.1.0",
-    "sass-embedded": "^1.89.2"
+		"react-icons": "^5.5.0",
-  },
+		"sass-embedded": "^1.89.2"
-  "devDependencies": {
+	},
-    "@eslint/js": "^9.25.0",
+	"devDependencies": {
-    "@types/react": "^19.1.2",
+		"@eslint/js": "^9.25.0",
-    "@types/react-dom": "^19.1.2",
+		"@types/react": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
+		"@types/react-dom": "^19.1.2",
-    "eslint": "^9.25.0",
+		"@vitejs/plugin-react": "^4.4.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
+		"eslint": "^9.25.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
+		"eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.0.0",
+		"eslint-plugin-react-refresh": "^0.4.19",
-    "vite": "^6.3.5"
+		"globals": "^16.0.0",
-  }
+		"vite": "^6.3.5"
+	}
 }

src/App.jsx

@@ -1,6 +1,6 @@
 import styles from './App.module.scss'
-import SneakersImage from './assets/images/sneakers-image.jpg'
 import { FaRegUser } from 'react-icons/fa'
+import React, { useState, useEffect } from 'react'
 
 function Header() {
 	const handleChange = event => {
@@ -14,55 +14,230 @@ function Header() {
 				<h2>Store</h2>
 				<input type='text	' placeholder='Search...' onChange={handleChange} />
 			</div>
-			<div>
+            <UserMenu isLoggedin={true} userName="Bob" role="user" />
-				<FaRegUser size={24} color='#3258e3' />
-				<button>Profile</button>
-			</div>
 		</header>
 	)
 }
 
-function Product() {
+function UserMenu({ userName }) {
-	function handleClick() {
+    const [loggedin,setLoggedin] = useState(false);
+    const [role, setRole] = useState('user');
+    
+    
+    if (loggedin) {
+        return (
+            <div className="user-menu">
+                <nav>
+                    <a href="/settings">Настройки</a>
+                    {role === "admin" && <a href="/admin">Панель администратора</a>}
+                    <div>
+				        <FaRegUser size={24} color='#3258e3' />
+				        <button>Profile</button>
+				        <button onClick={() => setLoggedin(false)}>Exit</button>
+			        </div>
+                </nav>
+            </div>
+        );
+    }
+    return (
+        <div className="login-form">
+            <button onClick={() => setLoggedin(true)}>Войти</button>
+        </div>
+    );
+}
+
+function ArticleViewer({ articleId }) {
+    const [article,setArticle] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    
+    useEffect(() => {
+        const fetchArticle = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const responce = await fetch(`http://localhost:8000/articles/${articleId}`)
+                
+                if(!responce.ok) {
+                    throw new Error('Не удалось загрузить статью');
+                }
+                
+                const data = await responce.json();
+                setArticle(data);
+            } catch(err) {
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        }
+        fetchArticle();
+    },[articleId]);
+    
+    if (loading) {
+        return (
+            <div className={styles.loading}>
+                <div className="spinner"></div>
+                <p>Загружаем статью ...</p>
+            </div>
+        );
+    }
+    if (error) {
+        return (
+            <div className={styles.error}>
+                <h3>Ошибка загрузки</h3>
+                <p>{error}</p>
+                <button onClick={()=>window.location.reload()}>Попробовать еще</button>
+            </div>
+        );
+    }
+    if (!article) {
+        return (
+            <div className={styles.empty}>
+                <p>Статья не найдена</p>
+            </div>
+        );
+    }
+    return (
+        <div className={styles.article}>
+            <h1>{article.title}</h1>
+            <div className="article-meta">
+                <span>Автор: {article.author}</span>
+                <span>Дата: {new Date(article.createDate).toLocaleDateString()}</span>
+            </div>
+            <div className="article-body">{article.content}</div>
+        </div>
+    );
+}
+
+function ProjectDashboard({ projects }) {
+    return (
+        <div className={styles.dashboard}>
+            <h1>Панель управления проектами</h1>
+            {projects.map(project => (
+                <div key={project.id} className={styles.project}>
+                    <h2>{project.name}</h2>
+                    <span className={styles.project_status}>{project.status}</span>
+                    <p className={styles.project_description}>{project.description}</p>
+                    
+                    {project.tasks.length >0 && (
+                    <div className={styles.tasks}>
+                        {project.tasks.map(task => (
+                            <div className={styles.task_card} key={task.id}>
+                            <h4>{task.title}</h4>
+                            <p>{task.description}</p>
+                            </div>
+                        ))}
+                    </div>
+                    )}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+function Product({ name, brand, price, imageUrl }) {
+	const [isLiked, setIsLiked] = React.useState(false)
+
+	const toggleLike = () => {
+		setIsLiked(!isLiked)
+	}
+
+	function handleAddClick() {
 		console.log('Working!')
 	}
 
 	return (
 		<div className={styles.product}>
-			<img src={SneakersImage} alt='' />
+			<img src={imageUrl} alt='' />
 			<div className={styles.content}>
 				<div className={styles.title}>
-					<h4>Sneakers Red & White 2025</h4>
+					<h4>{name}</h4>
-					<button onClick={event => handleClick(event)}>+</button>
+					<div className={styles.actions}>
+						<button
+							className={styles.likeButton}
+							onClick={toggleLike}
+							aria-label={isLiked ? 'Убрать лайк' : 'Добавить лайк'}
+						>
+							<svg
+								width='18'
+								height='18'
+								viewBox='0 0 24 24'
+								fill={isLiked ? 'red' : 'none'}
+								stroke={isLiked ? 'red' : 'currentColor'}
+								strokeWidth='1.5'
+							>
+								<path d='M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z' />
+							</svg>
+						</button>
+						<button onClick={handleAddClick}>+</button>
+					</div>
 				</div>
-				<p className={styles.description}>NIKE</p>
+				<p className={styles.description}>{brand}</p>
-				<p className={styles.price}>$38.00</p>
+				<p className={styles.price}>${price}</p>
 			</div>
 		</div>
 	)
 }
 
 function App() {
+	const [products, setProducts] = React.useState([])
+
+	const getProducts = async () => {
+		const response = await fetch('http://localhost:8000/products')
+		const data = await response.json()
+		setProducts(data)
+	}
+
+	React.useEffect(() => {
+		getProducts()
+	}, [])
+    
 	return (
 		<>
 			<div className={styles.container}>
 				<Header />
 			</div>
 			<div className={styles.container}>
-				<ul className={styles.list}>
+			    {products.length > 0 ? (
-					<li>
+                        <ul className={styles.list}>
-						<Product />
+                            {products.map(product => (
-					</li>
+                                <li key={product.id}>
-					<li>
+                                    <Product {...product} />
-						<Product />
+                                </li>
-					</li>
+                            ))}
-					<li>
+                        </ul>
-						<Product />
+                    ) : (
-					</li>
+                        <h3>Список товаров пуст</h3>
-				</ul>
+                    )
+                }
 			</div>
 		</>
 	)
 }
 
-export default App
+function App2() {
+	const [projects, setProjects] = React.useState([])
+
+	const getProjects = async () => {
+		const response = await fetch('http://localhost:8000/projects')
+		const data = await response.json()
+		setProjects(data)
+	}
+
+	React.useEffect(() => {
+		getProjects()
+	}, [])
+
+    return (
+        <>
+			<div className={styles.container}>
+				<Header />
+			</div>
+			<div className={styles.container}>
+                <ProjectDashboard projects={projects} />
+            </div>
+        </>
+    )
+}
+
+export default App2

src/App.module.scss

@@ -10,7 +10,14 @@
 
 	border-bottom-left-radius: 10px;
 	border-bottom-right-radius: 10px;
-
+    
+    nav {
+    	display: flex;
+	    justify-content: space-around;
+        flex-direction: row;
+	    align-items: center;
+    }
+    
 	div {
 		&:first-child {
 			display: flex;
@@ -61,6 +68,14 @@
 .container {
 	max-width: 1220px;
 	margin: 0 auto;
+    .article {
+        text-align: center;
+        background-color: lightgray;
+    }
+    .error {
+        text-align: center;
+        background-color: lightcoral;
+    }
 }
 
 .list {
@@ -97,21 +112,27 @@
 		font-size: 18px;
 	}
 
-	button {
+	.actions {
-		border: 1px solid $primary-color;
+		display: flex;
-		background-color: $white-color;
+		align-items: center;
-		color: $primary-color;
+		gap: 5px;
-		border-radius: 5px;
-		outline: 0;
 
-		font-size: 20px;
+		button {
-		padding: 5px 10px;
+			border: 1px solid $primary-color;
+			background-color: $white-color;
+			color: $primary-color;
+			border-radius: 5px;
+			outline: 0;
 
-		cursor: pointer;
+			font-size: 20px;
+			padding: 5px 10px;
 
-		&:hover {
+			cursor: pointer;
-			background-color: $seconday-color;
+
-			color: $white-color;
+			&:hover {
+				background-color: $seconday-color;
+				color: $white-color;
+			}
 		}
 	}
 }