разобрались с чистыми компонетами

package.json

@@ -14,7 +14,6 @@
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.15.1",
 		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {

src/App.jsx

@@ -0,0 +1,17 @@
+import styles from './App.module.scss'
+
+import Header from './components/header'
+import ProductList from './components/list'
+import Timer from './components/timer'
+
+const App = () => {
+	return (
+		<div className={styles.container}>
+			<Header />
+			<Timer />
+			<ProductList />
+		</div>
+	)
+}
+
+export default App

src/App.module.scss

@@ -1,3 +1,5 @@
+@use './assets/styles/variables' as *;
+
 .container {
 	max-width: 1170px;
 	margin: 0 auto;

src/components/card/index.jsx

@@ -1,11 +1,9 @@
 import styles from './index.module.scss'
 
 import WishIcon from '../../assets/icons/wish.svg'
-import { Link } from 'react-router-dom'
 
-const ProductCard = ({ id, name, price, imageUrl }) => {
+const ProductCard = ({ name, price, imageUrl }) => {
 	return (
-        
 		<div className={styles.product}>
 			<div className={styles.image}>
 				<img src={imageUrl} alt='' />
@@ -16,9 +14,7 @@ const ProductCard = ({ id, name, price, imageUrl }) => {
 				</div>
 			</div>
 			<div className={styles.content}>
-				<Link to={{ pathname: `/catalog/${id}` }} state={ name, price}>
-				    <h4>{name}</h4>
-				</Link>
+				<h4>{name}</h4>
 				<div className={styles.stats}>
 					<span>${price}</span>
 				</div>

src/components/header/index.jsx

@@ -4,7 +4,6 @@ import CartIcon from '../../assets/icons/cart.svg'
 import UserIcon from '../../assets/icons/user.svg'
 import WishlistIcon from '../../assets/icons/wishlist.svg'
 import LoopIcon from '../../assets/icons/loop.svg'
-import { Link, NavLink } from 'react-router-dom'
 
 const Header = () => {
 	return (
@@ -13,22 +12,16 @@ const Header = () => {
 			<nav>
 				<ul>
 					<li>
-						<NavLink to={{ pathname: '/' }}
-						    className={ ({ isActive }) => (isActive ? styles.active : '')}>
-						    Главная
-						</NavLink>
+						<a href='#'>Home</a>
 					</li>
 					<li>
-						<Link to={{ pathname: '/contact' }}>Контакты</Link>
+						<a href='#'>Contact</a>
 					</li>
 					<li>
-						<NavLink to={{ pathname: '/about' }}
-                        className={ ({ isActive }) => (isActive ? styles.active : '')}>
-						    О нас
-				        </NavLink>
+						<a href='#'>About</a>
 					</li>
 					<li>
-						<Link to={{ pathname: '/login' }}>Sign Up</Link>
+						<a href='#'>Sign Up</a>
 					</li>
 				</ul>
 			</nav>
@@ -38,21 +31,13 @@ const Header = () => {
 			</div>
 			<div className={styles.buttons}>
 				<button>
-					<Link to={{ pathname: '/wishlist' }}>
-						<img src={WishlistIcon} alt='' />
-					</Link>
+					<img src={WishlistIcon} alt='' />
 				</button>
 				<button>
-					<NavLink to={{ pathname: '/cart', search: '?category=electronic', state: {id: 44} }}
-					    className={ ({ isActive }) => (isActive ? styles.active : '')}>
-						<img src={CartIcon} alt='' />
-					</NavLink>
+					<img src={CartIcon} alt='' />
 				</button>
 				<button>
-				    <NavLink to={{ pathname: '/profile/111' }}
-                        className={ ({ isActive }) => (isActive ? styles.active : '')}>
-				        <img src={UserIcon} alt='' />
-				    </NavLink>
+					<img src={UserIcon} alt='' />
 				</button>
 			</div>
 		</header>

src/components/header/index.module.scss

@@ -53,6 +53,3 @@
 		}
 	}
 }
-    .active {
-        border-bottom: 1px solid red;
-    }

src/components/list/index.jsx

@@ -7,11 +7,10 @@ const ProductList = () => {
 	const [products, setProducts] = React.useState([])
 	const [loading, setLoading] = React.useState(true)
 	const [error, setError] = React.useState(null)
-    console.log("rendred");
-    
+
 	React.useEffect(() => {
 		let cancelled = false
-        console.log("useEffect");
+
 		const getProducts = async () => {
 			try {
 				setLoading(true)
@@ -45,7 +44,7 @@ const ProductList = () => {
 		return () => {
 			cancelled = true
 		}
-	},[])
+	}, [])
 
 	if (loading) {
 		return <div className={styles.loading}>Загрузка продуктов...</div>

src/components/timer/index.jsx

@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from 'react'
+import styles from './index.module.scss'
+
+const Timer = () => {
+    const [seconds, setSeconds] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setSeconds(prev => prev + 1);
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, []);
+    return (
+        <div>
+            <h2>Прошло секунд: {seconds}</h2>
+        </div>
+    );
+}
+
+export default Timer

src/main.jsx

@@ -1,29 +1,9 @@
+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import {
-	BrowserRouter as Router,
-	Routes,
-	Route,
-	Navigate, // 1. Импортируем компонент для редиректа
-} from 'react-router-dom'
-
-import Catalog from './pages/catalog'
-import Cart from './pages/cart'
-import About from './pages/about'
-import Login from './pages/login'
-import UserProfile from './pages/profile'
-import Item from './pages/item'
+import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-	<Router>
-		<Routes>
-			{/* 2. Добавляем редирект с корневого пути */}
-			<Route path='/' element={<Navigate to='/catalog' replace />} />
-			<Route path='/catalog' element={<Catalog />} />
-			<Route path='/catalog/:id' element={<Item />} />
-			<Route path='/cart' element={<Cart />} />
-			<Route path='/about' element={<About />} />
-			<Route path='/login' element={<Login />} />
-			<Route path='/profile/:id' element={<UserProfile name='Alex' />} />
-		</Routes>
-	</Router>
+	<StrictMode>
+		<App />
+	</StrictMode>
 )

src/pages/about/index.jsx

@@ -1,13 +0,0 @@
-import styles from './index.module.scss'
-
-import Header from '../../components/header/index'
-
-const About = () => {
-	return (
-        <div className={styles.container}>
-			<Header />
-        </div>
-    )
-}
-
-export default About

src/pages/about/index.module.scss

@@ -1,4 +0,0 @@
-.container {
-	max-width: 1170px;
-	margin: 0 auto;
-}

src/pages/cart/index.jsx

@@ -1,13 +0,0 @@
-import styles from './index.module.scss'
-
-import Header from '../../components/header/index'
-
-const Cart = () => {
-	return (
-        <div className={styles.container}>
-			<Header />
-        </div>
-    )
-}
-
-export default Cart

src/pages/cart/index.module.scss

@@ -1,4 +0,0 @@
-.container {
-	max-width: 1170px;
-	margin: 0 auto;
-}

src/pages/catalog/index.jsx

@@ -1,15 +0,0 @@
-import styles from './index.module.scss'
-
-import Header from '../../components/header/index'
-import ProductList from '../../components/list/index'
-
-const Catalog = () => {
-	return (
-		<div className={styles.container}>
-			<Header />
-			<ProductList />
-		</div>
-	)
-}
-
-export default Catalog

src/pages/item/index.jsx

@@ -1,12 +0,0 @@
-import styles from './index.module.scss'
-import { useParams } from 'react-router-dom'
-
-const Product = ({ name, price }) => {
-    const { id } = useParams();
-    return ( 
-        <>
-            <h2>Товар {id}. {name} по цене {price   }</h2>
-        </>
-    )
-}
-export default Product

src/pages/login/index.jsx

@@ -1,22 +0,0 @@
-import styles from './index.module.scss'
-import { useNavigate } from 'react-router-dom'
-
-const Login = () => {
-    const navigate = useNavigate();
-    
-    const handleSubmit = formData => {
-        //Какая то логика проверки авторизации
-        navigate('/catalog')
-    }
-    
-    return (
-        <>
-            <h2>Страница авторизации</h2>
-        <form onSubmit={handleSubmit}>
-            <button type="submit">Войти</button>
-        </form>
-        </>
-    )
-}
-
-export default Login

src/pages/profile/index.jsx

@@ -1,15 +0,0 @@
-import styles from './index.module.scss'
-import Header from '../../components/header/index'
-import { useParams } from 'react-router-dom'
-
-
-const UserProfile = ({ name }) => {
-    const { id } = useParams();
-    return (
-        <div className={styles.container}>
-			<Header />
-           <h2>Профиль пользователя {id} {name}</h2>
-        </div>
-    )
-}
-export default UserProfile

src/pages/profile/index.module.scss

@@ -1,4 +0,0 @@
-.container {
-	max-width: 1170px;
-	margin: 0 auto;
-}