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

db.json

@@ -1,70 +1,52 @@
 {
 	"products": [
 		{
-      "id": "1",
+			"id": 1,
 			"name": "Breed Dry Dog Food",
 			"price": 100,
 			"imageUrl": "./src/assets/images/products/dog-food.svg"
 		},
 		{
-      "id": "2",
+			"id": 2,
 			"name": "CANON EOS DSLR Camera",
 			"price": 360,
 			"imageUrl": "./src/assets/images/products/camera.svg"
 		},
 		{
-      "id": "3",
+			"id": 3,
 			"name": "ASUS FHD Gaming Laptop",
 			"price": 700,
 			"imageUrl": "./src/assets/images/products/laptop.svg"
 		},
 		{
-      "id": "4",
+			"id": 4,
 			"name": "Curology Product Set ",
 			"price": 500,
 			"imageUrl": "./src/assets/images/products/curoset.svg"
 		},
 		{
-      "id": "5",
+			"id": 5,
 			"name": "Kids Electric Car",
 			"price": 960,
 			"imageUrl": "./src/assets/images/products/car.svg"
 		},
 		{
-      "id": "6",
+			"id": 6,
 			"name": "Jr. Zoom Soccer Cleats",
 			"price": 1160,
 			"imageUrl": "./src/assets/images/products/soccer.svg"
 		},
 		{
-      "id": "7",
+			"id": 7,
 			"name": "GP11 Shooter USB Gamepad",
 			"price": 660,
 			"imageUrl": "./src/assets/images/products/gamepad.svg"
 		},
 		{
-      "id": "8",
+			"id": 8,
 			"name": "Quilted Satin Jacket",
 			"price": 660,
 			"imageUrl": "./src/assets/images/products/jacket.svg"
 		}
-  ],
-  "cart": [
-    {
-      "id": "f7d5",
-      "productId": "1",
-      "name": "Breed Dry Dog Food",
-      "price": 100,
-      "imageUrl": "./src/assets/images/products/dog-food.svg",
-      "quantity": 3
-    },
-    {
-      "id": "bb06",
-      "productId": "2",
-      "name": "CANON EOS DSLR Camera",
-      "price": 360,
-      "imageUrl": "./src/assets/images/products/camera.svg",
-      "quantity": 1
-    }
 	]
 }

package-lock.json

@@ -8,11 +8,9 @@
       "name": "store-client",
       "version": "0.0.0",
       "dependencies": {
-				"json-server": "^1.0.0-beta.3",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
-				"react-router-dom": "^7.7.1",
         "sass-embedded": "^1.89.2"
       },
       "devDependencies": {
@@ -1027,12 +1025,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-		"node_modules/@polka/url": {
-			"version": "1.0.0-next.29",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
-			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
-			"license": "MIT"
-		},
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.9",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz",
@@ -1320,244 +1312,6 @@
         "win32"
       ]
     },
-		"node_modules/@tinyhttp/accepts": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.2.3.tgz",
-			"integrity": "sha512-9pQN6pJAJOU3McmdJWTcyq7LLFW8Lj5q+DadyKcvp+sxMkEpktKX5sbfJgJuOvjk6+1xWl7pe0YL1US1vaO/1w==",
-			"license": "MIT",
-			"dependencies": {
-				"mime": "4.0.4",
-				"negotiator": "^0.6.3"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			},
-			"funding": {
-				"type": "individual",
-				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
-			}
-		},
-		"node_modules/@tinyhttp/app": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.5.2.tgz",
-			"integrity": "sha512-DcB3Y8GQppLQlO2VxRYF7LzTEAoZb+VRQXuIsErcu2fNaM1xdx6NQZDso5rlZUiaeg6KYYRfU34N4XkZbv6jSA==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/cookie": "2.1.1",
-				"@tinyhttp/proxy-addr": "2.2.1",
-				"@tinyhttp/req": "2.2.5",
-				"@tinyhttp/res": "2.2.5",
-				"@tinyhttp/router": "2.2.3",
-				"header-range-parser": "1.1.3",
-				"regexparam": "^2.0.2"
-			},
-			"engines": {
-				"node": ">=14.21.3"
-			},
-			"funding": {
-				"type": "individual",
-				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
-			}
-		},
-		"node_modules/@tinyhttp/content-disposition": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.2.tgz",
-			"integrity": "sha512-crXw1txzrS36huQOyQGYFvhTeLeG0Si1xu+/l6kXUVYpE0TjFjEZRqTbuadQLfKGZ0jaI+jJoRyqaWwxOSHW2g==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			},
-			"funding": {
-				"type": "individual",
-				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
-			}
-		},
-		"node_modules/@tinyhttp/content-type": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/content-type/-/content-type-0.1.4.tgz",
-			"integrity": "sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.4"
-			}
-		},
-		"node_modules/@tinyhttp/cookie": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/cookie/-/cookie-2.1.1.tgz",
-			"integrity": "sha512-h/kL9jY0e0Dvad+/QU3efKZww0aTvZJslaHj3JTPmIPC9Oan9+kYqmh3M6L5JUQRuTJYFK2nzgL2iJtH2S+6dA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			},
-			"funding": {
-				"type": "individual",
-				"url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
-			}
-		},
-		"node_modules/@tinyhttp/cookie-signature": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.1.1.tgz",
-			"integrity": "sha512-VDsSMY5OJfQJIAtUgeQYhqMPSZptehFSfvEEtxr+4nldPA8IImlp3QVcOVuK985g4AFR4Hl1sCbWCXoqBnVWnw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/cors": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.1.tgz",
-			"integrity": "sha512-qrmo6WJuaiCzKWagv2yA/kw6hIISfF/hOqPWwmI6w0o8apeTMmRN3DoCFvQ/wNVuWVdU5J4KU7OX8aaSOEq51A==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/vary": "^0.1.3"
-			},
-			"engines": {
-				"node": ">=12.20 || 14.x || >=16"
-			}
-		},
-		"node_modules/@tinyhttp/encode-url": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.1.1.tgz",
-			"integrity": "sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/etag": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/etag/-/etag-2.1.2.tgz",
-			"integrity": "sha512-j80fPKimGqdmMh6962y+BtQsnYPVCzZfJw0HXjyH70VaJBHLKGF+iYhcKqzI3yef6QBNa8DKIPsbEYpuwApXTw==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/forwarded": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/forwarded/-/forwarded-2.1.2.tgz",
-			"integrity": "sha512-9H/eulJ68ElY/+zYpTpNhZ7vxGV+cnwaR6+oQSm7bVgZMyuQfgROW/qvZuhmgDTIxnGMXst+Ba4ij6w6Krcs3w==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/logger": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/logger/-/logger-2.1.0.tgz",
-			"integrity": "sha512-Ma1fJ9CwUbn9r61/4HW6+nflsVoslpOnCrfQ6UeZq7GGIgwLzofms3HoSVG7M+AyRMJpxlfcDdbH5oFVroDMKA==",
-			"license": "MIT",
-			"dependencies": {
-				"colorette": "^2.0.20",
-				"dayjs": "^1.11.13",
-				"http-status-emojis": "^2.2.0"
-			},
-			"engines": {
-				"node": ">=14.18 || >=16.20"
-			}
-		},
-		"node_modules/@tinyhttp/proxy-addr": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-2.2.1.tgz",
-			"integrity": "sha512-BicqMqVI91hHq2BQmnqJUh0FQUnx7DncwSGgu2ghlh+JZG2rHK2ZN/rXkfhrx1rrUw6hnd0L36O8GPMh01+dDQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/forwarded": "2.1.2",
-				"ipaddr.js": "^2.2.0"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/req": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.5.tgz",
-			"integrity": "sha512-trfsXwtmsNjMcGKcLJ+45h912kLRqBQCQD06ams3Tq0kf4gHLxjHjoYOC1Z9yGjOn81XllRx8wqvnvr+Kbe3gw==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/accepts": "2.2.3",
-				"@tinyhttp/type-is": "2.2.4",
-				"@tinyhttp/url": "2.1.1",
-				"header-range-parser": "^1.1.3"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/res": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.5.tgz",
-			"integrity": "sha512-yBsqjWygpuKAVz4moWlP4hqzwiDDqfrn2mA0wviJAcgvGiyOErtlQwXY7aj3aPiCpURvxvEFO//Gdy6yV+xEpA==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/content-disposition": "2.2.2",
-				"@tinyhttp/cookie": "2.1.1",
-				"@tinyhttp/cookie-signature": "2.1.1",
-				"@tinyhttp/encode-url": "2.1.1",
-				"@tinyhttp/req": "2.2.5",
-				"@tinyhttp/send": "2.2.3",
-				"@tinyhttp/vary": "^0.1.3",
-				"es-escape-html": "^0.1.1",
-				"mime": "4.0.4"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/router": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.3.tgz",
-			"integrity": "sha512-O0MQqWV3Vpg/uXsMYg19XsIgOhwjyhTYWh51Qng7bxqXixxx2PEvZWnFjP7c84K7kU/nUX41KpkEBTLnznk9/Q==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/send": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.3.tgz",
-			"integrity": "sha512-o4cVHHGQ8WjVBS8UT0EE/2WnjoybrfXikHwsRoNlG1pfrC/Sd01u1N4Te8cOd/9aNGLr4mGxWb5qTm2RRtEi7g==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/content-type": "^0.1.4",
-				"@tinyhttp/etag": "2.1.2",
-				"mime": "4.0.4"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/type-is": {
-			"version": "2.2.4",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.4.tgz",
-			"integrity": "sha512-7F328NheridwjIfefBB2j1PEcKKABpADgv7aCJaE8x8EON77ZFrAkI3Rir7pGjopV7V9MBmW88xUQigBEX2rmQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@tinyhttp/content-type": "^0.1.4",
-				"mime": "4.0.4"
-			},
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/url": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/url/-/url-2.1.1.tgz",
-			"integrity": "sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20.0"
-			}
-		},
-		"node_modules/@tinyhttp/vary": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/@tinyhttp/vary/-/vary-0.1.3.tgz",
-			"integrity": "sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.20"
-			}
-		},
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1826,21 +1580,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-		"node_modules/chokidar": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-			"license": "MIT",
-			"dependencies": {
-				"readdirp": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 14.16.0"
-			},
-			"funding": {
-				"url": "https://paulmillr.com/funding/"
-			}
-		},
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1861,12 +1600,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/colorette": {
-			"version": "2.0.20",
-			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-			"license": "MIT"
-		},
     "node_modules/colorjs.io": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
@@ -1887,15 +1620,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/cookie": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-			"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=18"
-			}
-		},
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1918,12 +1642,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/dayjs": {
-			"version": "1.11.13",
-			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
-			"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
-			"license": "MIT"
-		},
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -1949,21 +1667,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/dot-prop": {
-			"version": "9.0.0",
-			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
-			"integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
-			"license": "MIT",
-			"dependencies": {
-				"type-fest": "^4.18.2"
-			},
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
     "node_modules/electron-to-chromium": {
       "version": "1.5.165",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.165.tgz",
@@ -1971,15 +1674,6 @@
       "dev": true,
       "license": "ISC"
     },
-		"node_modules/es-escape-html": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/es-escape-html/-/es-escape-html-0.1.1.tgz",
-			"integrity": "sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.x"
-			}
-		},
     "node_modules/esbuild": {
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
@@ -2222,18 +1916,6 @@
         "node": ">=0.10.0"
       }
     },
-		"node_modules/eta": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/eta/-/eta-3.5.0.tgz",
-			"integrity": "sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=6.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/eta-dev/eta?sponsor=1"
-			}
-		},
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2381,21 +2063,6 @@
         "node": ">=8"
       }
     },
-		"node_modules/header-range-parser": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.3.tgz",
-			"integrity": "sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=12.22.0"
-			}
-		},
-		"node_modules/http-status-emojis": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/http-status-emojis/-/http-status-emojis-2.2.0.tgz",
-			"integrity": "sha512-ompKtgwpx8ff0hsbpIB7oE4ax1LXoHmftsHHStMELX56ivG3GhofTX8ZHWlUaFKfGjcGjw6G3rPk7dJRXMmbbg==",
-			"license": "MIT"
-		},
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2439,24 +2106,6 @@
         "node": ">=0.8.19"
       }
     },
-		"node_modules/inflection": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.2.tgz",
-			"integrity": "sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=18.0.0"
-			}
-		},
-		"node_modules/ipaddr.js": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-			"integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 10"
-			}
-		},
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2534,45 +2183,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/json-server": {
-			"version": "1.0.0-beta.3",
-			"resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-beta.3.tgz",
-			"integrity": "sha512-DwE69Ep5ccwIJZBUIWEENC30Yj8bwr4Ax9W9VoIWAYnB8Sj4ReptscO8/DRHv/nXwVlmb3Bk73Ls86+VZdYkkA==",
-			"license": "SEE LICENSE IN ./LICENSE",
-			"dependencies": {
-				"@tinyhttp/app": "^2.4.0",
-				"@tinyhttp/cors": "^2.0.1",
-				"@tinyhttp/logger": "^2.0.0",
-				"chalk": "^5.3.0",
-				"chokidar": "^4.0.1",
-				"dot-prop": "^9.0.0",
-				"eta": "^3.5.0",
-				"inflection": "^3.0.0",
-				"json5": "^2.2.3",
-				"lowdb": "^7.0.1",
-				"milliparsec": "^4.0.0",
-				"sirv": "^2.0.4",
-				"sort-on": "^6.1.0"
-			},
-			"bin": {
-				"json-server": "lib/bin.js"
-			},
-			"engines": {
-				"node": ">=18.3"
-			}
-		},
-		"node_modules/json-server/node_modules/chalk": {
-			"version": "5.4.1",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
-			"integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
-			"license": "MIT",
-			"engines": {
-				"node": "^12.17.0 || ^14.13 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -2584,6 +2194,7 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -2639,21 +2250,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/lowdb": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
-			"integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
-			"license": "MIT",
-			"dependencies": {
-				"steno": "^4.0.2"
-			},
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/typicode"
-			}
-		},
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2664,30 +2260,6 @@
         "yallist": "^3.0.2"
       }
     },
-		"node_modules/milliparsec": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-4.0.0.tgz",
-			"integrity": "sha512-/wk9d4Z6/9ZvoEH/6BI4TrTCgmkpZPuSRN/6fI9aUHOfXdNTuj/VhLS7d+NqG26bi6L9YmGXutVYvWC8zQ0qtA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=20"
-			}
-		},
-		"node_modules/mime": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
-			"integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
-			"funding": [
-				"https://github.com/sponsors/broofa"
-			],
-			"license": "MIT",
-			"bin": {
-				"mime": "bin/cli.js"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2701,15 +2273,6 @@
         "node": "*"
       }
     },
-		"node_modules/mrmime": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
-			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=10"
-			}
-		},
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2743,15 +2306,6 @@
       "dev": true,
       "license": "MIT"
     },
-		"node_modules/negotiator": {
-			"version": "0.6.4",
-			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-			"integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -2951,66 +2505,6 @@
         "node": ">=0.10.0"
       }
     },
-		"node_modules/react-router": {
-			"version": "7.7.1",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz",
-			"integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==",
-			"license": "MIT",
-			"dependencies": {
-				"cookie": "^1.0.1",
-				"set-cookie-parser": "^2.6.0"
-			},
-			"engines": {
-				"node": ">=20.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=18",
-				"react-dom": ">=18"
-			},
-			"peerDependenciesMeta": {
-				"react-dom": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/react-router-dom": {
-			"version": "7.7.1",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz",
-			"integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==",
-			"license": "MIT",
-			"dependencies": {
-				"react-router": "7.7.1"
-			},
-			"engines": {
-				"node": ">=20.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=18",
-				"react-dom": ">=18"
-			}
-		},
-		"node_modules/readdirp": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-			"license": "MIT",
-			"engines": {
-				"node": ">= 14.18.0"
-			},
-			"funding": {
-				"type": "individual",
-				"url": "https://paulmillr.com/funding/"
-			}
-		},
-		"node_modules/regexparam": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
-			"integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=8"
-			}
-		},
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3404,12 +2898,6 @@
         "semver": "bin/semver.js"
       }
     },
-		"node_modules/set-cookie-parser": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
-			"license": "MIT"
-		},
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3433,35 +2921,6 @@
         "node": ">=8"
       }
     },
-		"node_modules/sirv": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@polka/url": "^1.0.0-next.24",
-				"mrmime": "^2.0.0",
-				"totalist": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 10"
-			}
-		},
-		"node_modules/sort-on": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/sort-on/-/sort-on-6.1.0.tgz",
-			"integrity": "sha512-WTECP0nYNWO1n2g5bpsV0yZN9cBmZsF8ThHFbOqVN0HBFRoaQZLLEMvMmJlKHNPYQeVngeI5+jJzIfFqOIo1OA==",
-			"license": "MIT",
-			"dependencies": {
-				"dot-prop": "^9.0.0"
-			},
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3472,18 +2931,6 @@
         "node": ">=0.10.0"
       }
     },
-		"node_modules/steno": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
-			"integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/typicode"
-			}
-		},
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3548,15 +2995,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-		"node_modules/totalist": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
-			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=6"
-			}
-		},
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -3576,18 +3014,6 @@
         "node": ">= 0.8.0"
       }
     },
-		"node_modules/type-fest": {
-			"version": "4.41.0",
-			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
-			"integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
-			"license": "(MIT OR CC0-1.0)",
-			"engines": {
-				"node": ">=16"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

package.json

@@ -11,11 +11,9 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"json-server": "^1.0.0-beta.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.7.1",
 		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {

src/App.jsx

@@ -1,11 +1,16 @@
-// удаляем все, оставляя лишь пустую функцию App ниже
+import styles from './App.module.scss'
 
-function App() {
+import Header from './components/header'
+import ProductList from './components/list'
+import Timer from './components/timer'
+
+const App = () => {
 	return (
-		<>
+		<div className={styles.container}>
-			{/* Добавьте тестовый контент для проверки */}
+			<Header />
-			<h1>Hello, React!</h1>
+			<Timer />
-		</>
+			<ProductList />
+		</div>
 	)
 }
 

src/App.module.scss

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

src/components/OrderDetail.jsx

@@ -1,41 +0,0 @@
-import styles from './OrderDetail.module.scss'
-import { useCart } from '../hooks/useCart'
-
-const OrderDetail = () => {
-	const { cart } = useCart()
-
-	const subtotal = cart.reduce(
-		(acc, item) => acc + item.price * item.quantity,
-		0
-	)
-	const discount = subtotal * 0.2
-	const delivery = 15
-	const total = subtotal - discount + delivery
-
-	return (
-		<div className={styles.detail}>
-			<h2>Order Summary</h2>
-			<div className={styles.stats}>
-				<div>
-					<p>Subtotal</p>
-					<span>${subtotal}</span>
-				</div>
-				<div>
-					<p>Discount (-20%)</p>
-					<span>-${discount}</span>
-				</div>
-				<div>
-					<p>Delivery Fee</p>
-					<span>${delivery}</span>
-				</div>
-			</div>
-			<div className={styles.total}>
-				<p>Total</p>
-				<span>${total}</span>
-			</div>
-			<button>Go to Checkout</button>
-		</div>
-	)
-}
-
-export default OrderDetail

src/components/OrderDetail.module.scss

@@ -1,67 +0,0 @@
-@use '../assets/styles/variables' as *;
-
-.detail {
-	border: 1px solid gainsboro;
-	border-radius: 20px;
-
-	flex-basis: 50%;
-	margin-top: 24px;
-	padding: 20px;
-
-	display: flex;
-	flex-direction: column;
-
-	.stats {
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-		margin-top: 24px;
-		padding-bottom: 20px;
-
-		border-bottom: 1px solid gainsboro;
-		div {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			p {
-				color: gray;
-				font-size: 20px;
-			}
-
-			span {
-				font-size: 20px;
-				font-weight: bold;
-			}
-		}
-	}
-
-	.total {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		p {
-			color: gray;
-			font-size: 20px;
-		}
-
-		span {
-			font-size: 20px;
-			font-weight: bold;
-			margin-top: 20px;
-		}
-	}
-
-	button {
-		outline: 0;
-		border: 0;
-		font-size: 16px;
-		padding: 20px;
-		border-radius: 62px;
-		background-color: $primary-color;
-		color: $white-color;
-		cursor: pointer;
-		margin-top: 24px;
-	}
-}

src/components/card/cart/index.jsx

@@ -1,41 +0,0 @@
-import styles from './index.module.scss'
-import TrashIcon from '../../../assets/icons/trash.svg'
-import { useCart } from '../../../hooks/useCart'
-
-const CartItem = ({ item }) => {
-	const { removeFromCart, updateQuantity } = useCart()
-
-	const handleIncrement = () => {
-		updateQuantity(item.id, item.quantity + 1)
-	}
-
-	const handleDecrement = () => {
-		if (item.quantity > 1) {
-			updateQuantity(item.id, item.quantity - 1)
-		}
-	}
-
-	return (
-		<div className={styles.item}>
-			<button className={styles.trash} onClick={() => removeFromCart(item.id)}>
-				<img src={TrashIcon} alt='Удалить' />
-			</button>
-			<div className={styles.image}>
-				<img src={item.imageUrl} alt={item.name} />
-			</div>
-			<div className={styles.content}>
-				<h2>{item.name}</h2>
-				<div className={styles.wrapper}>
-					<span className={styles.price}>${item.price}</span>
-					<div className={styles.buttons}>
-						<button onClick={handleDecrement}>-</button>
-						<span>{item.quantity}</span>
-						<button onClick={handleIncrement}>+</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default CartItem

src/components/card/cart/index.module.scss

@@ -1,62 +0,0 @@
-.item {
-	border-bottom: 1px solid #dcdcdc;
-	padding: 24px 0;
-	position: relative;
-
-	.trash {
-		outline: 0;
-		border: 0;
-		background-color: white;
-		position: absolute;
-
-		top: 20px;
-		right: 20px;
-
-		cursor: pointer;
-	}
-
-	.image {
-		background-color: #f5f5f5;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 35px;
-		height: 124px;
-		width: 124px;
-
-		img {
-			width: 90px;
-			object-fit: contain;
-		}
-	}
-
-	.wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		.price {
-			font-size: 24px;
-		}
-
-		.buttons {
-			display: flex;
-			background-color: #f0f0f0;
-			padding: 12px 20px;
-			gap: 20px;
-			border-radius: 62px;
-			align-items: center;
-
-			span {
-				font-size: 14px;
-			}
-
-			button {
-				outline: 0;
-				border: 0;
-				font-size: 16px;
-				cursor: pointer;
-			}
-		}
-	}
-}

src/components/card/index.jsx

@@ -0,0 +1,26 @@
+import styles from './index.module.scss'
+
+import WishIcon from '../../assets/icons/wish.svg'
+
+const ProductCard = ({ name, price, imageUrl }) => {
+	return (
+		<div className={styles.product}>
+			<div className={styles.image}>
+				<img src={imageUrl} alt='' />
+				<div className={styles.buttons}>
+					<button>
+						<img src={WishIcon} alt='' />
+					</button>
+				</div>
+			</div>
+			<div className={styles.content}>
+				<h4>{name}</h4>
+				<div className={styles.stats}>
+					<span>${price}</span>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default ProductCard

src/components/card/index.module.scss

@@ -1,4 +1,4 @@
-@use '../../../assets/styles/variables' as *;
+@use '../../assets/styles/variables' as *;
 
 .product {
 	display: flex;

src/components/card/product/index.jsx

@@ -1,33 +0,0 @@
-import styles from './index.module.scss'
-import WishIcon from '../../../assets/icons/wish.svg'
-import { useCart } from '../../../hooks/useCart'
-
-const ProductCard = ({ id, name, price, imageUrl }) => {
-	const { addToCart } = useCart()
-
-	const handleAdd = () => {
-		addToCart({ id, name, price, imageUrl })
-	}
-
-	return (
-		<div className={styles.product}>
-			<div className={styles.image}>
-				<img src={imageUrl} alt={name} />
-				<div className={styles.buttons}>
-					<button onClick={handleAdd}>В корзину</button>
-					<button>
-						<img src={WishIcon} alt='Избранное' />
-					</button>
-				</div>
-			</div>
-			<div className={styles.content}>
-				<h4>{name}</h4>
-				<div className={styles.stats}>
-					<span>${price}</span>
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default ProductCard

src/components/header/index.jsx

@@ -4,24 +4,21 @@ 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 } from 'react-router-dom'
-import { useCart } from '../../hooks/useCart'
 
 const Header = () => {
-    const { cart, loading, error } = useCart()
 	return (
 		<header className={styles.header}>
 			<h2>Exclusive</h2>
 			<nav>
 				<ul>
 					<li>
-						<Link to={{ pathname: '/' }}>Home</Link>
+						<a href='#'>Home</a>
 					</li>
 					<li>
-						<Link to={{ pathname: '/contact' }}>Contact</Link>
+						<a href='#'>Contact</a>
 					</li>
 					<li>
-						<Link to={{ pathname: '/about' }}>About</Link>
+						<a href='#'>About</a>
 					</li>
 					<li>
 						<a href='#'>Sign Up</a>
@@ -34,17 +31,10 @@ const Header = () => {
 			</div>
 			<div className={styles.buttons}>
 				<button>
-					<Link to={{ pathname: '/wishlist' }}>
 					<img src={WishlistIcon} alt='' />
-					</Link>
 				</button>
 				<button>
-					<Link to={{ pathname: '/cart' }}>
+					<img src={CartIcon} alt='' />
-					    <div className={styles.cart}>
-						    <img src={CartIcon} alt='' className={styles.img} />
-                            {cart && cart.length > 0 ? <div className={styles.sticker}>{cart.length}</div> : ''}
-                        </div>
-					</Link>
 				</button>
 				<button>
 					<img src={UserIcon} alt='' />

src/components/header/index.module.scss

@@ -52,34 +52,4 @@
 			cursor: pointer;
 		}
 	}
-
-    .cart {
-        position: relative;
-        display: inline-block;
-        border-radius: 12px;
-        /*overflow: hidden;*/
-    }
-
-    .sticker {
-        position: absolute;
-        top: 15px;
-        /* отступ сверху */
-        left: 15px;
-        /* отступ слева */
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
-        /* Градиент стикера */
-        color: #ffffff;
-        padding: 6px 10px 6px 10px;
-        border-radius: 20px;
-        /* Округление стикера */
-        box-shadow: 0 4px 12px rgba(255, 65, 108, 0.4);
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        font-size: 12px;
-        font-weight: 700;
-        letter-spacing: 0.5px;
-        z-index: 10;
-    }
 }

src/components/list/cart/index.jsx

@@ -1,22 +0,0 @@
-import CartItem from '../../card/cart'
-import styles from './index.module.scss'
-import { useCart } from '../../../hooks/useCart'
-
-const CartList = () => {
-	const { cart, loading, error } = useCart()
-
-	if (loading) return <p>Загрузка корзины...</p>
-	if (error) return <p>Ошибка: {error}</p>
-
-	return (
-		<ul className={styles.list}>
-			{cart.map(item => (
-				<li key={item.id}>
-					<CartItem item={item} />
-				</li>
-			))}
-		</ul>
-	)
-}
-
-export default CartList

src/components/list/cart/index.module.scss

@@ -1,13 +0,0 @@
-.list {
-	display: flex;
-	border: 1px solid gainsboro;
-	border-radius: 20px;
-	padding: 20px;
-	margin-top: 24px;
-	list-style: none;
-
-	max-width: 715px;
-	flex-direction: column;
-
-	flex-basis: 80%;
-}

src/components/list/index.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import styles from './index.module.scss'
+
+import ProductCard from '../card'
+
+const ProductList = () => {
+	const [products, setProducts] = React.useState([])
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
+
+	React.useEffect(() => {
+		let cancelled = false
+
+		const getProducts = async () => {
+			try {
+				setLoading(true)
+				setError(null)
+
+				const response = await fetch('http://localhost:8000/products')
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! status: ${response.status}`)
+				}
+
+				const data = await response.json()
+
+				if (!cancelled) {
+					setProducts(data)
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err.message)
+					setProducts([])
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false)
+				}
+			}
+		}
+
+		getProducts()
+
+		return () => {
+			cancelled = true
+		}
+	}, [])
+
+	if (loading) {
+		return <div className={styles.loading}>Загрузка продуктов...</div>
+	}
+
+	if (error) {
+		return (
+			<div className={styles.error}>
+				<p>Ошибка при загрузке продуктов: {error}</p>
+				<button onClick={() => window.location.reload()}>
+					Попробовать снова
+				</button>
+			</div>
+		)
+	}
+
+	return (
+		<ul className={styles.list}>
+			{products.map(product => (
+				<li key={product.id}>
+					<ProductCard {...product} />
+				</li>
+			))}
+		</ul>
+	)
+}
+
+export default ProductList

src/components/list/product/index.jsx

@@ -1,34 +0,0 @@
-import styles from './index.module.scss'
-import ProductCard from '../../card/product'
-import { useProducts } from '../../../hooks/useProducts'
-
-const ProductList = () => {
-	const { products, loading, error } = useProducts()
-
-	if (loading) {
-		return <div className={styles.loading}>Загрузка продуктов...</div>
-	}
-
-	if (error) {
-		return (
-			<div className={styles.error}>
-				<p>Ошибка при загрузке продуктов: {error}</p>
-				<button onClick={() => window.location.reload()}>
-					Попробовать снова
-				</button>
-			</div>
-		)
-	}
-
-	return (
-		<ul className={styles.list}>
-			{products.map(product => (
-				<li key={product.id}>
-					<ProductCard {...product} />
-				</li>
-			))}
-		</ul>
-	)
-}
-
-export default ProductList

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/hooks/useCart.js

@@ -1,48 +0,0 @@
-import React from 'react'
-import { CartService } from '../services/CartService'
-
-export function useCart() {
-	const [cart, setCart] = React.useState([])
-	const [loading, setLoading] = React.useState(true)
-	const [error, setError] = React.useState(null)
-
-	const fetchCart = React.useCallback(async () => {
-		try {
-			setLoading(true)
-			const data = await CartService.getCart()
-			setCart(data)
-		} catch (err) {
-			setError(err.message)
-		} finally {
-			setLoading(false)
-		}
-	}, [])
-
-	const addToCart = async product => {
-		await CartService.addToCart(product)
-		await fetchCart()
-	}
-
-	const removeFromCart = async id => {
-		await CartService.removeFromCart(id)
-		await fetchCart()
-	}
-
-	const updateQuantity = async (id, quantity) => {
-		await CartService.updateQuantity(id, quantity)
-		await fetchCart()
-	}
-
-	React.useEffect(() => {
-		fetchCart()
-	}, [fetchCart])
-
-	return {
-		cart,
-		loading,
-		error,
-		addToCart,
-		removeFromCart,
-		updateQuantity,
-	}
-}

src/hooks/useProducts.js

@@ -1,42 +0,0 @@
-import React from 'react'
-import { fetchProducts } from '../services/ProductService'
-
-export function useProducts() {
-	const [products, setProducts] = React.useState([])
-	const [loading, setLoading] = React.useState(true)
-	const [error, setError] = React.useState(null)
-
-	React.useEffect(() => {
-		let cancelled = false
-
-		const loadProducts = async () => {
-			try {
-				setLoading(true)
-				setError(null)
-
-				const data = await fetchProducts()
-
-				if (!cancelled) {
-					setProducts(data)
-				}
-			} catch (err) {
-				if (!cancelled) {
-					setError(err.message)
-					setProducts([])
-				}
-			} finally {
-				if (!cancelled) {
-					setLoading(false)
-				}
-			}
-		}
-
-		loadProducts()
-
-		return () => {
-			cancelled = true
-		}
-	}, [])
-
-	return { products, loading, error }
-}

src/main.jsx

@@ -1,20 +1,9 @@
+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import {
+import App from './App.jsx'
-	BrowserRouter as Router,
-	Routes,
-	Route,
-	Navigate,
-} from 'react-router-dom'
-
-import Catalog from './pages/catalog'
-import Cart from './pages/cart'
 
 createRoot(document.getElementById('root')).render(
-	<Router>
+	<StrictMode>
-		<Routes>
+		<App />
-			<Route path='/' element={<Navigate to='/catalog' replace />} />
+	</StrictMode>
-			<Route path='/catalog' element={<Catalog />} />
-			<Route path='/cart' element={<Cart />} />
-		</Routes>
-	</Router>
 )

src/pages/cart/index.jsx

@@ -1,20 +0,0 @@
-import styles from './index.module.scss'
-
-import Header from '../../components/header'
-import CartList from '../../components/list/cart'
-import OrderDetail from '../../components/OrderDetail'
-
-const Cart = () => {
-	return (
-		<div className={styles.container}>
-			<Header />
-			<h1 style={{ marginTop: 24 }}>Your Cart</h1>
-			<div style={{ display: 'flex', gap: 20 }}>
-				<CartList />
-				<OrderDetail />
-			</div>
-		</div>
-	)
-}
-
-export default Cart

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/product/index'
-
-const Catalog = () => {
-	return (
-		<div className={styles.container}>
-			<Header />
-			<ProductList />
-		</div>
-	)
-}
-
-export default Catalog

src/pages/catalog/index.module.scss

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

src/services/CartService.js

@@ -1,53 +0,0 @@
-const BASE_URL = 'http://localhost:8000/cart'
-
-export const CartService = {
-	async getCart() {
-		const response = await fetch(BASE_URL)
-		if (!response.ok) throw new Error('Ошибка при получении корзины')
-		return response.json()
-	},
-    async getCartCount() {
-		const response = await fetch(BASE_URL)
-		if (!response.ok) throw new Error('Ошибка при получении корзины')
-		return response.json().length
-	},
-	async addToCart(product) {
-		const existing = await fetch(`${BASE_URL}?productId=${product.id}`)
-		const data = await existing.json()
-
-		if (data.length > 0) {
-			const current = data[0]
-			return fetch(`${BASE_URL}/${current.id}`, {
-				method: 'PATCH',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ quantity: current.quantity + 1 }),
-			})
-		} else {
-			return fetch(BASE_URL, {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					productId: product.id,
-					name: product.name,
-					price: product.price,
-					imageUrl: product.imageUrl,
-					quantity: 1,
-				}),
-			})
-		}
-	},
-
-	async updateQuantity(id, quantity) {
-		return fetch(`${BASE_URL}/${id}`, {
-			method: 'PATCH',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ quantity }),
-		})
-	},
-
-	async removeFromCart(id) {
-		return fetch(`${BASE_URL}/${id}`, {
-			method: 'DELETE',
-		})
-	},
-}

src/services/ProductService.js

@@ -1,15 +0,0 @@
-const API_URL = 'http://localhost:8000/products'
-
-export async function fetchProducts() {
-	try {
-		const response = await fetch(API_URL)
-
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`)
-		}
-
-		return await response.json()
-	} catch (error) {
-		throw new Error(error.message || 'Ошибка при загрузке продуктов')
-	}
-}