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

db.json

@@ -21,5 +21,35 @@
 			"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"
+                }
             ]
+        }
+    ]
+    
 }

src/App.jsx

@@ -1,6 +1,6 @@
 import styles from './App.module.scss'
 import { FaRegUser } from 'react-icons/fa'
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
 function Header() {
 	const handleChange = event => {
@@ -14,11 +14,124 @@ function Header() {
 				<h2>Store</h2>
 				<input type='text	' placeholder='Search...' onChange={handleChange} />
 			</div>
+            <UserMenu isLoggedin={true} userName="Bob" role="user" />
+		</header>
+	)
+}
+
+function UserMenu({ userName }) {
+    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>
-		</header>
     )
 }
 
@@ -85,16 +198,46 @@ function App() {
 				<Header />
 			</div>
 			<div className={styles.container}>
+			    {products.length > 0 ? (
                         <ul className={styles.list}>
                             {products.map(product => (
-						<li>
+                                <li key={product.id}>
                                     <Product {...product} />
                                 </li>
                             ))}
                         </ul>
+                    ) : (
+                        <h3>Список товаров пуст</h3>
+                    )
+                }
 			</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

@@ -11,6 +11,13 @@
 	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 {