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

Рефакторинг компонента ProductList
Перенесли стили для компонентов в соответствующие файлы
2026-05-14 20:25:06 +03:00 · 2025-07-07 23:06:01 +03:00 · 2025-07-07 13:15:19 +03:00 · 2025-07-07 13:13:41 +03:00 · 2025-07-07 13:09:04 +03:00 · 2025-07-07 12:15:38 +03:00
30 changed files with 879 additions and 68 deletions
@@ -0,0 +1,52 @@
+{
+	"products": [
+		{
+			"id": 1,
+			"name": "Breed Dry Dog Food",
+			"price": 100,
+			"imageUrl": "./src/assets/images/products/dog-food.svg"
+		},
+		{
+			"id": 2,
+			"name": "CANON EOS DSLR Camera",
+			"price": 360,
+			"imageUrl": "./src/assets/images/products/camera.svg"
+		},
+		{
+			"id": 3,
+			"name": "ASUS FHD Gaming Laptop",
+			"price": 700,
+			"imageUrl": "./src/assets/images/products/laptop.svg"
+		},
+		{
+			"id": 4,
+			"name": "Curology Product Set ",
+			"price": 500,
+			"imageUrl": "./src/assets/images/products/curoset.svg"
+		},
+		{
+			"id": 5,
+			"name": "Kids Electric Car",
+			"price": 960,
+			"imageUrl": "./src/assets/images/products/car.svg"
+		},
+		{
+			"id": 6,
+			"name": "Jr. Zoom Soccer Cleats",
+			"price": 1160,
+			"imageUrl": "./src/assets/images/products/soccer.svg"
+		},
+		{
+			"id": 7,
+			"name": "GP11 Shooter USB Gamepad",
+			"price": 660,
+			"imageUrl": "./src/assets/images/products/gamepad.svg"
+		},
+		{
+			"id": 8,
+			"name": "Quilted Satin Jacket",
+			"price": 660,
+			"imageUrl": "./src/assets/images/products/jacket.svg"
+		}
+	]
+}
@@ -3,8 +3,23 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Vite + React</title>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+
+				font-family: 'Poppins', sans-serif;
+			}
+		</style>
 	</head>
 	<body>
 		<div id="root"></div>
@@ -9,7 +9,9 @@
      "version": "0.0.0",
      "dependencies": {
        "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-icons": "^5.5.0",
+        "sass-embedded": "^1.89.2"
      },
      "devDependencies": {
        "@eslint/js": "^9.25.0",
@@ -319,6 +321,12 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.5.2.tgz",
+      "integrity": "sha512-foZ7qr0IsUBjzWIq+SuBLfdQCpJ1j8cTuNNT4owngTHoN5KsJb8L9t65fzz7SCeSWzescoOil/0ldqiL041ABg==",
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.5",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
@@ -1518,6 +1526,12 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "license": "MIT/X11"
+    },
    "node_modules/callsites": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1586,6 +1600,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "license": "MIT"
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2038,7 +2058,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -2054,6 +2073,12 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "license": "MIT"
+    },
    "node_modules/import-fresh": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -2461,6 +2486,15 @@
        "react": "^19.1.0"
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2528,6 +2562,326 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/sass-embedded": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.89.2.tgz",
+      "integrity": "sha512-Ack2K8rc57kCFcYlf3HXpZEJFNUX8xd8DILldksREmYXQkRHI879yy8q4mRDJgrojkySMZqmmmW1NxrFxMsYaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "buffer-builder": "^0.2.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.0.2",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-android-arm": "1.89.2",
+        "sass-embedded-android-arm64": "1.89.2",
+        "sass-embedded-android-riscv64": "1.89.2",
+        "sass-embedded-android-x64": "1.89.2",
+        "sass-embedded-darwin-arm64": "1.89.2",
+        "sass-embedded-darwin-x64": "1.89.2",
+        "sass-embedded-linux-arm": "1.89.2",
+        "sass-embedded-linux-arm64": "1.89.2",
+        "sass-embedded-linux-musl-arm": "1.89.2",
+        "sass-embedded-linux-musl-arm64": "1.89.2",
+        "sass-embedded-linux-musl-riscv64": "1.89.2",
+        "sass-embedded-linux-musl-x64": "1.89.2",
+        "sass-embedded-linux-riscv64": "1.89.2",
+        "sass-embedded-linux-x64": "1.89.2",
+        "sass-embedded-win32-arm64": "1.89.2",
+        "sass-embedded-win32-x64": "1.89.2"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.89.2.tgz",
+      "integrity": "sha512-oHAPTboBHRZlDBhyRB6dvDKh4KvFs+DZibDHXbkSI6dBZxMTT+Yb2ivocHnctVGucKTLQeT7+OM5DjWHyynL/A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.89.2.tgz",
+      "integrity": "sha512-+pq7a7AUpItNyPu61sRlP6G2A8pSPpyazASb+8AK2pVlFayCSPAEgpwpCE9A2/Xj86xJZeMizzKUHxM2CBCUxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.89.2.tgz",
+      "integrity": "sha512-HfJJWp/S6XSYvlGAqNdakeEMPOdhBkj2s2lN6SHnON54rahKem+z9pUbCriUJfM65Z90lakdGuOfidY61R9TYg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.89.2.tgz",
+      "integrity": "sha512-BGPzq53VH5z5HN8de6jfMqJjnRe1E6sfnCWFd4pK+CAiuM7iw5Fx6BQZu3ikfI1l2GY0y6pRXzsVLdp/j4EKEA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.89.2.tgz",
+      "integrity": "sha512-UCm3RL/tzMpG7DsubARsvGUNXC5pgfQvP+RRFJo9XPIi6elopY5B6H4m9dRYDpHA+scjVthdiDwkPYr9+S/KGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.89.2.tgz",
+      "integrity": "sha512-D9WxtDY5VYtMApXRuhQK9VkPHB8R79NIIR6xxVlN2MIdEid/TZWi1MHNweieETXhWGrKhRKglwnHxxyKdJYMnA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.89.2.tgz",
+      "integrity": "sha512-leP0t5U4r95dc90o8TCWfxNXwMAsQhpWxTkdtySDpngoqtTy3miMd7EYNYd1znI0FN1CBaUvbdCMbnbPwygDlA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.89.2.tgz",
+      "integrity": "sha512-2N4WW5LLsbtrWUJ7iTpjvhajGIbmDR18ZzYRywHdMLpfdPApuHPMDF5CYzHbS+LLx2UAx7CFKBnj5LLjY6eFgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.89.2.tgz",
+      "integrity": "sha512-Z6gG2FiVEEdxYHRi2sS5VIYBmp17351bWtOCUZ/thBM66+e70yiN6Eyqjz80DjL8haRUegNQgy9ZJqsLAAmr9g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.89.2.tgz",
+      "integrity": "sha512-nTyuaBX6U1A/cG7WJh0pKD1gY8hbg1m2SnzsyoFG+exQ0lBX/lwTLHq3nyhF+0atv7YYhYKbmfz+sjPP8CZ9lw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.89.2.tgz",
+      "integrity": "sha512-N6oul+qALO0SwGY8JW7H/Vs0oZIMrRMBM4GqX3AjM/6y8JsJRxkAwnfd0fDyK+aICMFarDqQonQNIx99gdTZqw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.89.2.tgz",
+      "integrity": "sha512-K+FmWcdj/uyP8GiG9foxOCPfb5OAZG0uSVq80DKgVSC0U44AdGjvAvVZkrgFEcZ6cCqlNC2JfYmslB5iqdL7tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.89.2.tgz",
+      "integrity": "sha512-g9nTbnD/3yhOaskeqeBQETbtfDQWRgsjHok6bn7DdAuwBsyrR3JlSFyqKc46pn9Xxd9SQQZU8AzM4IR+sY0A0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.89.2.tgz",
+      "integrity": "sha512-Ax7dKvzncyQzIl4r7012KCMBvJzOz4uwSNoyoM5IV6y5I1f5hEwI25+U4WfuTqdkv42taCMgpjZbh9ERr6JVMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.89.2.tgz",
+      "integrity": "sha512-j96iJni50ZUsfD6tRxDQE2QSYQ2WrfHxeiyAXf41Kw0V4w5KYR/Sf6rCZQLMTUOHnD16qTMVpQi20LQSqf4WGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.89.2",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.89.2.tgz",
+      "integrity": "sha512-cS2j5ljdkQsb4PaORiClaVYynE9OAPZG/XjbOMxpQmjRIf7UroY4PEIH+Waf+y47PfXFX9SyxhYuw2NIKGbEng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
    "node_modules/scheduler": {
      "version": "0.26.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -2603,6 +2957,27 @@
        "node": ">=8"
      }
    },
+    "node_modules/sync-child-process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
+      "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+      "license": "MIT",
+      "dependencies": {
+        "sync-message-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/sync-message-port": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz",
+      "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.14",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -2620,6 +2995,12 @@
        "url": "https://github.com/sponsors/SuperchupuDev"
      }
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2674,6 +3055,12 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "license": "MIT"
+    },
    "node_modules/vite": {
      "version": "6.3.5",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -1,27 +1,30 @@
 {
-  "name": "store-client",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite", 
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.25.0",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "vite": "^6.3.5"
-  }
+	"name": "store-client",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"server": "json-server --watch db.json --port 8000",
+		"build": "vite build",
+		"lint": "eslint .",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"react-icons": "^5.5.0",
+		"sass-embedded": "^1.89.2"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.25.0",
+		"@types/react": "^19.1.2",
+		"@types/react-dom": "^19.1.2",
+		"@vitejs/plugin-react": "^4.4.1",
+		"eslint": "^9.25.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-refresh": "^0.4.19",
+		"globals": "^16.0.0",
+		"vite": "^6.3.5"
+	}
 }
@@ -1,46 +1,16 @@
-import React, { useMemo, useCallback, useState } from 'react'
+import styles from './App.module.scss'

-const TodoItem = React.memo(({ item, onToggle, onDelete }) => {
-    console.log(`rendred ${item.id}`);
-    return <li>
-            {item.name}
-            <button onClick={() => onToggle(item.id)}>Done</button>
-            <button onClick={() => onDelete(item.id)}>remove</button>
-        </li>
-})
+import Header from './components/header'
+import ProductList from './components/list'
+import Timer from './components/timer'

-function ItemList({ items }) {
-
-    const handleToggle = useCallback(id => {
-        items.done = true;
-        console.log(`Item ${id} done`)
-        console.log(id)
-    },[]);
-    
-    const handleDelete = useCallback(id => {
-        items.pop(id);
-    },[]);
-    return (
-        <>
-            <h3>List items</h3>
-            {items.map(item => (
-             <TodoItem key={item.id} item={item}
-              onToggle={handleToggle} onDelete={handleDelete} />
-             ))}
-        </>
-    )
-}
-
-function App() {
+const App = () => {
 	return (
-		<>
-			{/* Добавьте тестовый контент для проверки */}
-			<h1>Hello, React!</h1>
-            <ItemList items={[
-                {id:1,name:'Первый',done:false},
-                {id:2,name:'Второй',done:false}
-            ]} />
-		</>
+		<div className={styles.container}>
+			<Header />
+			<Timer />
+			<ProductList />
+		</div>
 	)
 }

@@ -0,0 +1,6 @@
+@use './assets/styles/variables' as *;
+
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 27C11.5523 27 12 26.5523 12 26C12 25.4477 11.5523 25 11 25C10.4477 25 10 25.4477 10 26C10 26.5523 10.4477 27 11 27Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 27C25.5523 27 26 26.5523 26 26C26 25.4477 25.5523 25 25 25C24.4477 25 24 25.4477 24 26C24 26.5523 24.4477 27 25 27Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 5H7L10 22H26" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 16.6667H25.59C25.7056 16.6667 25.8177 16.6267 25.9072 16.5535C25.9966 16.4802 26.0579 16.3782 26.0806 16.2648L27.8806 7.26479C27.8951 7.19222 27.8934 7.11733 27.8755 7.04552C27.8575 6.97371 27.8239 6.90678 27.7769 6.84956C27.73 6.79234 27.6709 6.74625 27.604 6.71462C27.5371 6.68299 27.464 6.66661 27.39 6.66666H8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 20L16.2223 16.2156M18.3158 11.1579C18.3158 13.0563 17.5617 14.8769 16.2193 16.2193C14.8769 17.5617 13.0563 18.3158 11.1579 18.3158C9.2595 18.3158 7.43886 17.5617 6.0965 16.2193C4.75413 14.8769 4 13.0563 4 11.1579C4 9.2595 4.75413 7.43886 6.0965 6.0965C7.43886 4.75413 9.2595 4 11.1579 4C13.0563 4 14.8769 4.75413 16.2193 6.0965C17.5617 7.43886 18.3158 9.2595 18.3158 11.1579V11.1579Z" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3.57143H2.33333L3.66667 19H14.3333L15.6667 3.57143H1M9 7.42857V15.1429M12.3333 7.42857L11.6667 15.1429M5.66667 7.42857L6.33333 15.1429M6.33333 3.57143L7 1H11L11.6667 3.57143" stroke="black" stroke-width="1.56" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 27V24.3333C24 22.9188 23.5224 21.5623 22.6722 20.5621C21.8221 19.5619 20.669 19 19.4667 19H11.5333C10.331 19 9.17795 19.5619 8.32778 20.5621C7.47762 21.5623 7 22.9188 7 24.3333V27" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 14C18.9853 14 21 11.9853 21 9.5C21 7.01472 18.9853 5 16.5 5C14.0147 5 12 7.01472 12 9.5C12 11.9853 14.0147 14 16.5 14Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 1C2.7912 1 1 2.73964 1 4.88594C1 6.61852 1.7 10.7305 8.5904 14.8873C8.71383 14.961 8.85552 15 9 15C9.14448 15 9.28617 14.961 9.4096 14.8873C16.3 10.7305 17 6.61852 17 4.88594C17 2.73964 15.2088 1 13 1C10.7912 1 9 3.35511 9 3.35511C9 3.35511 7.2088 1 5 1Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 7C8.239 7 6 9.23669 6 11.9962C6 14.2238 6.875 19.5107 15.488 24.8551C15.6423 24.9499 15.8194 25 16 25C16.1806 25 16.3577 24.9499 16.512 24.8551C25.125 19.5107 26 14.2238 26 11.9962C26 9.23669 23.761 7 21 7C18.239 7 16 10.028 16 10.028C16 10.028 13.761 7 11 7Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,4 @@
+$white-color: white;
+$black-color: black;
+
+$primary-color: #db4444;
@@ -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
@@ -0,0 +1,48 @@
+@use '../../assets/styles/variables' as *;
+
+.product {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 270px;
+
+	.image {
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 35px;
+		height: 250px;
+		position: relative;
+
+		.buttons {
+			position: absolute;
+			top: 12px;
+			right: 12px;
+
+			button {
+				display: flex;
+				outline: 0;
+				border: 0;
+				border-radius: 50%;
+				padding: 10px;
+				background-color: white;
+
+				cursor: pointer;
+			}
+		}
+	}
+
+	.content {
+		h4 {
+			font-size: 16px;
+		}
+
+		.stats {
+			span {
+				font-size: 16px;
+				color: $primary-color;
+			}
+		}
+	}
+}
@@ -0,0 +1,47 @@
+import styles from './index.module.scss'
+
+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'
+
+const Header = () => {
+	return (
+		<header className={styles.header}>
+			<h2>Exclusive</h2>
+			<nav>
+				<ul>
+					<li>
+						<a href='#'>Home</a>
+					</li>
+					<li>
+						<a href='#'>Contact</a>
+					</li>
+					<li>
+						<a href='#'>About</a>
+					</li>
+					<li>
+						<a href='#'>Sign Up</a>
+					</li>
+				</ul>
+			</nav>
+			<div className={styles.search}>
+				<input type='text' placeholder='What are you looking for?' />
+				<img src={LoopIcon} alt='' />
+			</div>
+			<div className={styles.buttons}>
+				<button>
+					<img src={WishlistIcon} alt='' />
+				</button>
+				<button>
+					<img src={CartIcon} alt='' />
+				</button>
+				<button>
+					<img src={UserIcon} alt='' />
+				</button>
+			</div>
+		</header>
+	)
+}
+
+export default Header
@@ -0,0 +1,55 @@
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid gainsboro;
+	padding: 30px 0;
+
+	h2 {
+		font-size: 24px;
+	}
+
+	ul {
+		list-style: none;
+		display: flex;
+		gap: 48px;
+
+		a {
+			color: black;
+			text-decoration: none;
+			font-size: 16px;
+			cursor: pointer;
+		}
+	}
+
+	.search {
+		display: flex;
+		align-items: center;
+		background-color: #f5f5f5;
+		padding: 7px 12px;
+		gap: 35px;
+
+		input {
+			outline: 0;
+			border: 0;
+			background-color: #f5f5f5;
+			font-size: 12px;
+		}
+
+		img {
+			cursor: pointer;
+		}
+	}
+
+	.buttons {
+		display: flex;
+		gap: 16px;
+
+		button {
+			background: none;
+			outline: 0;
+			border: 0;
+			cursor: pointer;
+		}
+	}
+}
@@ -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
@@ -0,0 +1,7 @@
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding-top: 60px;
+	gap: 30px;
+}
@@ -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
@@ -1,8 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-// удаляем import './index.css'
 import App from './App.jsx'

 createRoot(document.getElementById('root')).render(
+	<StrictMode>
 		<App />
+	</StrictMode>
 )
Author	SHA1	Message	Date
laktionov-as	7bb32d1a0b	разобрались с чистыми компонетами	2026-05-14 20:25:06 +03:00
isHardCoded	169ce23bed	Рефакторинг компонента ProductList	2025-07-07 23:06:01 +03:00
isHardCoded	1a03116e40	Перенесли стили для компонентов в соответствующие файлы	2025-07-07 13:15:19 +03:00
isHardCoded	195fbaf556	Перенесли весь код в компоненты	2025-07-07 13:13:41 +03:00
isHardCoded	371bccf190	Создали папку для каждого компонента	2025-07-07 13:09:04 +03:00
isHardCoded	7bab2db70a	Добавили карточку товара и список товаров, создали новые данные в db.json. Установили в проект иконки и изображения новых товаров, создали функцию getProducts для получения товаров с бекенда	2025-07-07 12:15:38 +03:00
isHardCoded	ad0b6bc86a	Сделали полное изменение структуры, изменили шрифт и цветовую палитру, переделали компонент Header и стили для него, остальные компоненты были временно удалены	2025-07-07 11:32:38 +03:00
isHardCoded	c44b4a283c	Fix: изменили description на brand	2025-06-25 15:43:44 +03:00
isHardCoded	c5760f27b4	Создали props для компонента Products, отмаппили полученные товары на странице	2025-06-25 15:40:12 +03:00
isHardCoded	ca519f47b1	Создали асинхронную функцию getProducts для получения продуктов с сервера	2025-06-25 15:38:08 +03:00
isHardCoded	2812645834	Установили библиотеку json-server, заполнили данные в db.json, настроили скрипт для запуска сервера	2025-06-25 15:14:13 +03:00
isHardCoded	b8e88a4866	Добавили в компонент Product иконку сердца и создали состояние для нее	2025-06-18 11:45:47 +03:00
isHardCoded	102da1ad75	Fix	2025-06-16 13:50:56 +03:00
isHardCoded	a84b1972e7	Стилизовали компонент Header, добавили обработчик событий onChange	2025-06-16 13:32:07 +03:00
isHardCoded	2ba1a63832	Добавили обработчик событий по клику на карточку товара, создали компонент Header, установили библиотеку react-icons	2025-06-16 12:48:23 +03:00
isHardCoded	9367009fdf	Добавили каталог товаров, карточки и стилизацию для них	2025-06-08 13:05:39 +03:00
isHardCoded	e0ba3a0f45	Изменили подход стилизации на CSS Modules	2025-06-08 12:26:21 +03:00
isHardCoded	df845c3ae7	Вынесли свойство для шрифтов в index.html для применения их ко всем текстовым элементам	2025-06-08 12:17:15 +03:00
isHardCoded	7a5be1d876	Создали компонент Product, вынесли стили для него в отдельный файл App.css	2025-06-08 12:12:36 +03:00