Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 laktionov-as
|
7ed8f4ce9e | ||
|
laktionov-as
|
32bb365db4 |
@@ -1,25 +1,70 @@
|
||||
{
|
||||
"products": [
|
||||
{
|
||||
"id":1,
|
||||
"name":"Кросовки Red & White 2025",
|
||||
"brand":"NIKE",
|
||||
"price":38.0,
|
||||
"imageUrl":"./assets/images/sneakers-image.jpg"
|
||||
"id": "1",
|
||||
"name": "Breed Dry Dog Food",
|
||||
"price": 100,
|
||||
"imageUrl": "./src/assets/images/products/dog-food.svg"
|
||||
},
|
||||
{
|
||||
"id":2,
|
||||
"name":"Кросовки белые 2024",
|
||||
"brand":"NIKE",
|
||||
"price":40.0,
|
||||
"imageUrl":"./assets/images/sneakers-image.jpg"
|
||||
"id": "2",
|
||||
"name": "CANON EOS DSLR Camera",
|
||||
"price": 360,
|
||||
"imageUrl": "./src/assets/images/products/camera.svg"
|
||||
},
|
||||
{
|
||||
"id":3,
|
||||
"name":"Sneakers Red & White 2025",
|
||||
"brand":"NIKE",
|
||||
"price":46.0,
|
||||
"imageUrl":"./assets/images/sneakers-image.jpg"
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
+7
-5
@@ -3,6 +3,12 @@
|
||||
<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>
|
||||
@@ -11,11 +17,7 @@
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(249, 249, 249);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
Generated
+575
-1
@@ -8,9 +8,11 @@
|
||||
"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": {
|
||||
@@ -1025,6 +1027,12 @@
|
||||
"@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",
|
||||
@@ -1312,6 +1320,244 @@
|
||||
"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",
|
||||
@@ -1580,6 +1826,21 @@
|
||||
"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",
|
||||
@@ -1600,6 +1861,12 @@
|
||||
"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",
|
||||
@@ -1620,6 +1887,15 @@
|
||||
"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",
|
||||
@@ -1642,6 +1918,12 @@
|
||||
"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",
|
||||
@@ -1667,6 +1949,21 @@
|
||||
"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",
|
||||
@@ -1674,6 +1971,15 @@
|
||||
"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",
|
||||
@@ -1916,6 +2222,18 @@
|
||||
"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",
|
||||
@@ -2063,6 +2381,21 @@
|
||||
"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",
|
||||
@@ -2106,6 +2439,24 @@
|
||||
"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",
|
||||
@@ -2183,6 +2534,45 @@
|
||||
"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",
|
||||
@@ -2194,7 +2584,6 @@
|
||||
"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"
|
||||
@@ -2250,6 +2639,21 @@
|
||||
"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",
|
||||
@@ -2260,6 +2664,30 @@
|
||||
"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",
|
||||
@@ -2273,6 +2701,15 @@
|
||||
"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",
|
||||
@@ -2306,6 +2743,15 @@
|
||||
"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",
|
||||
@@ -2505,6 +2951,66 @@
|
||||
"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",
|
||||
@@ -2898,6 +3404,12 @@
|
||||
"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",
|
||||
@@ -2921,6 +3433,35 @@
|
||||
"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",
|
||||
@@ -2931,6 +3472,18 @@
|
||||
"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",
|
||||
@@ -2995,6 +3548,15 @@
|
||||
"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",
|
||||
@@ -3014,6 +3576,18 @@
|
||||
"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",
|
||||
|
||||
+3
-1
@@ -4,16 +4,18 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"server": "json-server --watch db.json --port 8000",
|
||||
"dev": "vite",
|
||||
"server": "json-server --watch db.json --port 8000",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"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": {
|
||||
|
||||
+3
-193
@@ -1,200 +1,10 @@
|
||||
import styles from './App.module.scss'
|
||||
import SneakersImage from './assets/images/sneakers-image.jpg'
|
||||
import { FaRegUser } from 'react-icons/fa'
|
||||
import React from 'react'
|
||||
|
||||
function EffectComponent() {
|
||||
const [size, setSize] = React.useState(100);
|
||||
const boxRef = React.useRef(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const box = boxRef.current
|
||||
if (box) {
|
||||
const { width, height } = box.getBoundingClientRect()
|
||||
console.log('[useEffect] Размеры (EffectComponent):', { width, height })
|
||||
}
|
||||
}, [size]);
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: '30px' }}>
|
||||
<h3>useEffect</h3>
|
||||
<div
|
||||
ref={boxRef}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundColor: 'lightblue',
|
||||
transition: 'all 1.3s',
|
||||
}}
|
||||
/>
|
||||
<button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LayoutEffectComponent() {
|
||||
const [size, setSize] = React.useState(100)
|
||||
const boxRef = React.useRef(null)
|
||||
|
||||
React.useLayoutEffect(() => {
|
||||
const box = boxRef.current
|
||||
if (box) {
|
||||
const { width, height } = box.getBoundingClientRect()
|
||||
console.log('[useLayoutEffect] Размеры (LayoutEffectComponent):', {
|
||||
width,
|
||||
height,
|
||||
})
|
||||
}
|
||||
}, [size])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>useLayoutEffect</h3>
|
||||
<div
|
||||
ref={boxRef}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundColor: 'lightgreen',
|
||||
transition: 'all 1.3s',
|
||||
}}
|
||||
/>
|
||||
<button onClick={() => setSize(prev => prev + 20)}>Увеличить</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Header() {
|
||||
const handleChange = event => {
|
||||
const newValue = event.target.value
|
||||
console.log('Новое значение:', newValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<div>
|
||||
<h2>Store</h2>
|
||||
<input type='text' placeholder='Search...' onChange={handleChange} />
|
||||
</div>
|
||||
<div>
|
||||
<FaRegUser size={24} color='#3258e3' />
|
||||
<button>Profile</button>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
function ToolTip() {
|
||||
const ref = React.useRef(null);
|
||||
const [height,setHeight] = React.useState(0);
|
||||
|
||||
React.useLayoutEffect(()=>{
|
||||
if (ref.current) {
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
setHeight(rect.height);
|
||||
}
|
||||
},[])
|
||||
|
||||
return <div ref={ref} style={{height: '40px'}}>Высота: {height}</div>
|
||||
}
|
||||
|
||||
function Product({ name, brand, price, url }) {
|
||||
const [isLiked, setIsLiked] = React.useState(false)
|
||||
|
||||
const toggleLike = () => {
|
||||
setIsLiked(!isLiked)
|
||||
}
|
||||
|
||||
function handleAddClick() {
|
||||
console.log('Working!')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.product}>
|
||||
<img src={SneakersImage} alt='' />
|
||||
<ToolTip />
|
||||
<div className={styles.content}>
|
||||
<div className={styles.title}>
|
||||
<h4>{name}</h4>
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
className={styles.likeButton}
|
||||
onClick={toggleLike}
|
||||
aria-label={isLiked ? 'Убрать лайк' : 'Добавить лайк'}
|
||||
>
|
||||
<svg
|
||||
width='18'
|
||||
height='18'
|
||||
viewBox='0 0 24 24'
|
||||
fill={isLiked ? 'red' : 'none'}
|
||||
stroke={isLiked ? 'red' : 'currentColor'}
|
||||
strokeWidth='1.5'
|
||||
>
|
||||
<path d='M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z' />
|
||||
</svg>
|
||||
</button>
|
||||
<button onClick={handleAddClick}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className={styles.description}>{brand}</p>
|
||||
<p className={styles.price}>${price}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MyComponent({ children }) {
|
||||
return <div className="wrapper">{children}</div>;
|
||||
}
|
||||
|
||||
function RowList({ children }) {
|
||||
return (
|
||||
<div className="rowList">
|
||||
{children.map(child => (
|
||||
<div className="row">{child}</div>
|
||||
))}
|
||||
<p>{React.Children.count(children)}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// удаляем все, оставляя лишь пустую функцию App ниже
|
||||
|
||||
function App() {
|
||||
const [products,setProducts] = React.useState([]);
|
||||
|
||||
const getProducts = async () => {
|
||||
const responce = await fetch('http://localhost:8000/products');
|
||||
const data = await responce.json();
|
||||
setProducts(data);
|
||||
}
|
||||
React.useEffect(() => {
|
||||
getProducts();
|
||||
},[]);
|
||||
console.log({...products});
|
||||
return (
|
||||
<>
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
</div>
|
||||
<div className={styles.container}>
|
||||
<ul className={styles.list}>
|
||||
{products.map(product => (
|
||||
<li>
|
||||
<Product {...product} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<MyComponent>
|
||||
<h4>Заголовок</h4>
|
||||
<p>Привет!</p>
|
||||
</MyComponent>
|
||||
<ol>
|
||||
<RowList>
|
||||
<li>первый</li>
|
||||
<li>второй</li>
|
||||
<li>третий</li>
|
||||
</RowList>
|
||||
</ol>
|
||||
</div>
|
||||
{/* Добавьте тестовый контент для проверки */}
|
||||
<h1>Hello, React!</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,135 +0,0 @@
|
||||
@use './assets/styles/variables' as *;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
h2 {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
border: 1px solid gainsboro;
|
||||
padding: 5px 10px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
button {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
font-size: 16px;
|
||||
background-color: $primary-color;
|
||||
color: $white-color;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $seconday-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1220px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 10px;
|
||||
margin-top: 100px; /* временно */
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 350px;
|
||||
gap: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
border: 1px solid $primary-color;
|
||||
background-color: $white-color;
|
||||
color: $primary-color;
|
||||
border-radius: 5px;
|
||||
outline: 0;
|
||||
|
||||
font-size: 20px;
|
||||
padding: 5px 10px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $seconday-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 560 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 375 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 598 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 454 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 460 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 246 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 628 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 204 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 186 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 143 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 394 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 165 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
@@ -1,5 +1,4 @@
|
||||
$white-color: white;
|
||||
$black-color: black;
|
||||
|
||||
$primary-color: #3258e3;
|
||||
$seconday-color: #4432e3;
|
||||
$primary-color: #db4444;
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
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
|
||||
@@ -0,0 +1,67 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
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
|
||||
@@ -0,0 +1,62 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
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
|
||||
@@ -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,57 @@
|
||||
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'
|
||||
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>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={{ pathname: '/contact' }}>Contact</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={{ pathname: '/about' }}>About</Link>
|
||||
</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>
|
||||
<Link to={{ pathname: '/wishlist' }}>
|
||||
<img src={WishlistIcon} alt='' />
|
||||
</Link>
|
||||
</button>
|
||||
<button>
|
||||
<Link to={{ pathname: '/cart' }}>
|
||||
<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='' />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,85 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
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
|
||||
@@ -0,0 +1,13 @@
|
||||
.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%;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
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
|
||||
@@ -0,0 +1,7 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding-top: 60px;
|
||||
gap: 30px;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
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,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
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 }
|
||||
}
|
||||
+16
-5
@@ -1,9 +1,20 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import {
|
||||
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(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path='/' element={<Navigate to='/catalog' replace />} />
|
||||
<Route path='/catalog' element={<Catalog />} />
|
||||
<Route path='/cart' element={<Cart />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
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
|
||||
@@ -0,0 +1,4 @@
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
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
|
||||
@@ -0,0 +1,4 @@
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
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',
|
||||
})
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
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 || 'Ошибка при загрузке продуктов')
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user