Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 laktionov-as
|
93b5b8dd85 |
+128
-14
@@ -1,24 +1,138 @@
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
node_modules
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# vitepress build output
|
||||
**/.vitepress/dist
|
||||
|
||||
# vitepress cache directory
|
||||
**/.vitepress/cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2026 laktionov-as
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
|
||||
associated documentation files (the "Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
|
||||
following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial
|
||||
portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
|
||||
LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
|
||||
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
|
||||
USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -1,12 +1,3 @@
|
||||
# React + Vite
|
||||
# react
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
Уроки по React
|
||||
@@ -1,52 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
|
||||
export default [
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...js.configs.recommended.rules,
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
-28
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
-3244
File diff suppressed because it is too large
Load Diff
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"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",
|
||||
"react-router-dom": "^7.15.1",
|
||||
"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 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,6 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 560 B |
@@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 375 B |
@@ -1,4 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 598 B |
@@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 454 B |
@@ -1,3 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 460 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 246 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 628 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 204 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 186 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 143 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 394 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 165 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 406 KiB |
@@ -1,4 +0,0 @@
|
||||
$white-color: white;
|
||||
$black-color: black;
|
||||
|
||||
$primary-color: #db4444;
|
||||
@@ -1,30 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import WishIcon from '../../assets/icons/wish.svg'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const ProductCard = ({ id, name, price, imageUrl }) => {
|
||||
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}>
|
||||
<Link to={{ pathname: `/catalog/${id}` }} state={ name, price}>
|
||||
<h4>{name}</h4>
|
||||
</Link>
|
||||
<div className={styles.stats}>
|
||||
<span>${price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductCard
|
||||
@@ -1,48 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
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, NavLink } from 'react-router-dom'
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<h2>Exclusive</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink to={{ pathname: '/' }}
|
||||
className={ ({ isActive }) => (isActive ? styles.active : '')}>
|
||||
Главная
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={{ pathname: '/contact' }}>Контакты</Link>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to={{ pathname: '/about' }}
|
||||
className={ ({ isActive }) => (isActive ? styles.active : '')}>
|
||||
О нас
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={{ pathname: '/login' }}>Sign Up</Link>
|
||||
</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>
|
||||
<NavLink to={{ pathname: '/cart', search: '?category=electronic', state: {id: 44} }}
|
||||
className={ ({ isActive }) => (isActive ? styles.active : '')}>
|
||||
<img src={CartIcon} alt='' />
|
||||
</NavLink>
|
||||
</button>
|
||||
<button>
|
||||
<NavLink to={{ pathname: '/profile/111' }}
|
||||
className={ ({ isActive }) => (isActive ? styles.active : '')}>
|
||||
<img src={UserIcon} alt='' />
|
||||
</NavLink>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -1,58 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-bottom: 1px solid red;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
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)
|
||||
console.log("rendred");
|
||||
|
||||
React.useEffect(() => {
|
||||
let cancelled = false
|
||||
console.log("useEffect");
|
||||
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
|
||||
@@ -1,7 +0,0 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding-top: 60px;
|
||||
gap: 30px;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Navigate, // 1. Импортируем компонент для редиректа
|
||||
} from 'react-router-dom'
|
||||
|
||||
import Catalog from './pages/catalog'
|
||||
import Cart from './pages/cart'
|
||||
import About from './pages/about'
|
||||
import Login from './pages/login'
|
||||
import UserProfile from './pages/profile'
|
||||
import Item from './pages/item'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<Router>
|
||||
<Routes>
|
||||
{/* 2. Добавляем редирект с корневого пути */}
|
||||
<Route path='/' element={<Navigate to='/catalog' replace />} />
|
||||
<Route path='/catalog' element={<Catalog />} />
|
||||
<Route path='/catalog/:id' element={<Item />} />
|
||||
<Route path='/cart' element={<Cart />} />
|
||||
<Route path='/about' element={<About />} />
|
||||
<Route path='/login' element={<Login />} />
|
||||
<Route path='/profile/:id' element={<UserProfile name='Alex' />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
)
|
||||
@@ -1,13 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import Header from '../../components/header/index'
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
@@ -1,4 +0,0 @@
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import Header from '../../components/header/index'
|
||||
|
||||
const Cart = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cart
|
||||
@@ -1,4 +0,0 @@
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
|
||||
import Header from '../../components/header/index'
|
||||
import ProductList from '../../components/list/index'
|
||||
|
||||
const Catalog = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
<ProductList />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Catalog
|
||||
@@ -1,4 +0,0 @@
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
const Product = ({ name, price }) => {
|
||||
const { id } = useParams();
|
||||
return (
|
||||
<>
|
||||
<h2>Товар {id}. {name} по цене {price }</h2>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Product
|
||||
@@ -1,22 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
const Login = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = formData => {
|
||||
//Какая то логика проверки авторизации
|
||||
navigate('/catalog')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Страница авторизации</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<button type="submit">Войти</button>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login
|
||||
@@ -1,15 +0,0 @@
|
||||
import styles from './index.module.scss'
|
||||
import Header from '../../components/header/index'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
|
||||
const UserProfile = ({ name }) => {
|
||||
const { id } = useParams();
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
<h2>Профиль пользователя {id} {name}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default UserProfile
|
||||
@@ -1,4 +0,0 @@
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user