-
- 
-
+
);
-}
-
-export default App;
+};
diff --git a/src/components/BasketButton/BasketButton.tsx b/src/components/BasketButton/BasketButton.tsx
new file mode 100644
index 000000000..d71146286
--- /dev/null
+++ b/src/components/BasketButton/BasketButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import './basketbutton.css';
+
+interface ButtonProps {
+ primary?: boolean;
+ backgroundColor?: string;
+ size?: 'small' | 'medium' | 'large';
+ onClick?: () => void;
+ count: number;
+}
+
+export function BasketButton({ primary = false, size = 'medium', backgroundColor, ...props }: ButtonProps) {
+ const count = props.count;
+ const mode = primary ? 'primary' : 'secondary';
+
+ if (count === 0) {
+ return (
+
+ );
+ }
+
+ return (
+ - Текст писать тут -
-
+
+
+
+
+
+
+ Главная страница
} />
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/BasketButton/basketbutton.css b/src/components/BasketButton/basketbutton.css
new file mode 100644
index 000000000..eb80d98c6
--- /dev/null
+++ b/src/components/BasketButton/basketbutton.css
@@ -0,0 +1,58 @@
+.button {
+ font-family: 'Arial', sans-serif;
+ font-size: 16px;
+ padding: 10px 20px;
+ border: none;
+ cursor: pointer;
+ border-radius: 5px;
+ transition: background 0.3s;
+}
+
+.primary {
+ background: #ff671f;
+ color: #fff;
+}
+
+.secondary {
+ background: #008a00;
+ color: #fff;
+}
+
+.small {
+ font-size: 14px;
+ padding: 8px 16px;
+}
+
+.medium {
+ font-size: 16px;
+ padding: 10px 20px;
+}
+
+.large {
+ font-size: 18px;
+ padding: 12px 24px;
+}
+
+.counterContainer {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.decrement, .increment {
+ background: #ff671f;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.countInput {
+ width: 40px;
+ text-align: center;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
diff --git a/src/components/BasketList/BasketList.css b/src/components/BasketList/BasketList.css
new file mode 100644
index 000000000..dbb387a54
--- /dev/null
+++ b/src/components/BasketList/BasketList.css
@@ -0,0 +1,12 @@
+.basket-list {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ background: #f9f9f9;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.basket-list > * + * {
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/components/BasketList/BasketList.stories.tsx b/src/components/BasketList/BasketList.stories.tsx
new file mode 100644
index 000000000..a6c9c003a
--- /dev/null
+++ b/src/components/BasketList/BasketList.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BasketList from './BasketList';
+
+const meta: Meta
+ {products.map((product) => (
+
+ );
+};
+
+export default BasketList;
diff --git a/src/components/BasketRow/BasketRow.stories.tsx b/src/components/BasketRow/BasketRow.stories.tsx
new file mode 100644
index 000000000..ec93f35f6
--- /dev/null
+++ b/src/components/BasketRow/BasketRow.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BasketRow from './BasketRow';
+
+const meta: Meta
+ {title}
+ {price} ₽
+
+ );
+};
+
+export default BasketRow;
diff --git a/src/components/BasketRow/basketrow.css b/src/components/BasketRow/basketrow.css
new file mode 100644
index 000000000..31102c6c8
--- /dev/null
+++ b/src/components/BasketRow/basketrow.css
@@ -0,0 +1,97 @@
+.basketRow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px;
+ border-bottom: 1px solid #eee;
+ background: #fff;
+}
+
+.basketRowTitle {
+ flex: 1;
+ margin-right: 20px;
+ font-weight: 500;
+}
+
+.basketRowPrice {
+ margin-right: 20px;
+ color: #666;
+}
+
+.basketRowControls {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-right: 20px;
+}
+
+.basketRowControls button {
+ padding: 5px 10px;
+ background: #f0f0f0;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.basketRowControls button:hover {
+ background: #e0e0e0;
+}
+
+.basketRowControls span {
+ min-width: 30px;
+ text-align: center;
+}
+
+.basketRowRemove {
+ padding: 8px 16px;
+ background: #ff4444;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.basketRowRemove:hover {
+ background: #ff0000;
+}
+
+.basket-image img {
+ width: 60px;
+ height: 60px;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.basket-name {
+ flex: 1;
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+ padding: 0 15px;
+}
+
+.basket-delete button {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.basket-price {
+ font-size: 14px;
+ color: #666;
+ min-width: 100px;
+ text-align: center;
+}
+
+.basket-action {
+ display: flex;
+ align-items: center;
+}
+
+.basket-total {
+ font-size: 18px;
+ font-weight: bold;
+ color: #ff671f;
+ min-width: 100px;
+ text-align: right;
+}
\ No newline at end of file
diff --git a/src/components/BasketRow/icon_delete.svg b/src/components/BasketRow/icon_delete.svg
new file mode 100644
index 000000000..db62a1aef
--- /dev/null
+++ b/src/components/BasketRow/icon_delete.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
new file mode 100644
index 000000000..146787728
--- /dev/null
+++ b/src/components/Header/Header.css
@@ -0,0 +1,37 @@
+.header {
+ background-color: #ffffff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 1rem;
+}
+
+.nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.navList {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 1rem;
+}
+
+.navLink {
+ color: #333;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.2s ease;
+}
+
+.navLink:hover {
+ color: #007bff;
+}
+
+.active {
+ color: #007bff;
+ font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
new file mode 100644
index 000000000..bc1e0a415
--- /dev/null
+++ b/src/components/Header/Header.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Header from './Header';
+
+const meta: Meta
+
+ {count}
+
+
+
+ Магазин
+ +
+ setModalItem(null)} />}
+
+ );
+};
+
+const Modal: React.FCItems
+-
+ {items.map((item: ItemProps) => (
+
- setModalItem(item)}>
+ {item.title}+{item.price} ₽+ +
+ ))}
+
+
,
+ document.body
+ );
+};
+
+export default ItemList;
\ No newline at end of file
diff --git a/src/components/ItemList/itemlist.css b/src/components/ItemList/itemlist.css
new file mode 100644
index 000000000..fad6ecb9a
--- /dev/null
+++ b/src/components/ItemList/itemlist.css
@@ -0,0 +1,77 @@
+.itemList {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ padding: 20px;
+ background: #f5f5f5;
+}
+
+.itemListItems {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.itemListItem {
+ cursor: pointer;
+ transition: background 0.2s;
+ padding: 15px;
+ border-bottom: 1px solid #eee;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.itemListItem:hover {
+ background: #eaeaea;
+}
+
+.itemTitle {
+ font-weight: bold;
+}
+
+.itemPrice {
+ color: #666;
+}
+
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ max-width: 500px;
+ width: 90%;
+}
+
+.modalImage {
+ max-width: 100%;
+ height: auto;
+ margin-bottom: 15px;
+}
+
+button {
+ padding: 8px 16px;
+ background: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+button:hover {
+ background: #0056b3;
+}
diff --git a/src/components/ItemListContainer/ItemList_Demo_Button.tsx b/src/components/ItemListContainer/ItemList_Demo_Button.tsx
new file mode 100644
index 000000000..34cae16e9
--- /dev/null
+++ b/src/components/ItemListContainer/ItemList_Demo_Button.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import ItemList from '../ItemList/ItemList';
+import { ItemProps } from '../ItemList/ItemList';
+import logo from './favicon.svg';
+
+export const ItemListDemoButton: React.FC = () => {
+ const [items] = useState
+ 
+
+ {item.title}
+Цена: {item.price} ₽
+ +
+
+ );
+};
diff --git a/src/components/ItemListContainer/favicon.svg b/src/components/ItemListContainer/favicon.svg
new file mode 100644
index 000000000..c48b6be52
--- /dev/null
+++ b/src/components/ItemListContainer/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/ProductList/ProductList.css b/src/components/ProductList/ProductList.css
new file mode 100644
index 000000000..baa0871ca
--- /dev/null
+++ b/src/components/ProductList/ProductList.css
@@ -0,0 +1,47 @@
+.productList {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+.productList h2 {
+ margin-bottom: 20px;
+ color: #333;
+}
+
+.productListItems {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.productListItem {
+ margin-bottom: 20px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ overflow: hidden;
+ transition: transform 0.2s ease;
+}
+
+.productListItem:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.productLink {
+ display: block;
+ padding: 20px;
+ text-decoration: none;
+ color: inherit;
+}
+
+.productTitle {
+ margin: 0 0 10px 0;
+ color: #2c3e50;
+}
+
+.productDescription {
+ margin: 0;
+ color: #666;
+ line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/components/ProductList/ProductList.stories.tsx b/src/components/ProductList/ProductList.stories.tsx
new file mode 100644
index 000000000..cd70fd0c4
--- /dev/null
+++ b/src/components/ProductList/ProductList.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import ProductList from './ProductList';
+
+const meta: Meta
+
+ );
+};
+
+export default ProductList;
\ No newline at end of file
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
new file mode 100644
index 000000000..ef9ae0533
--- /dev/null
+++ b/src/components/ProtectedRoute.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store';
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+ requireAuth?: boolean;
+ requireAdmin?: boolean;
+}
+
+export const ProtectedRoute: React.FCOur Products
+-
+ {products.map((product: Product) => (
+
-
+
+
+
{product.title}
+{product.description}
+{product.price} ₽
+ +
+ ))}
+
+ 
+
+ );
+};
+
+export default ShortProductCard;
\ No newline at end of file
diff --git a/src/components/ShortProductCard/img.png b/src/components/ShortProductCard/img.png
new file mode 100644
index 000000000..6a26b28a4
Binary files /dev/null and b/src/components/ShortProductCard/img.png differ
diff --git a/src/components/ShortProductCard/shortproductcard.css b/src/components/ShortProductCard/shortproductcard.css
new file mode 100644
index 000000000..a09cfadd0
--- /dev/null
+++ b/src/components/ShortProductCard/shortproductcard.css
@@ -0,0 +1,47 @@
+.product-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px;
+ border-bottom: 1px solid #ddd;
+ background: #fff;
+ font-family: Arial, sans-serif;
+}
+
+.product-image img {
+ width: 60px;
+ height: 60px;
+ object-fit: cover;
+ border-radius: 5px;
+}
+
+.product-details {
+ flex: 1;
+ padding: 0 15px;
+}
+
+.product-name {
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+ margin: 0;
+}
+
+.product-description {
+ font-size: 14px;
+ color: #666;
+ margin: 5px 0 0;
+}
+
+.product-price {
+ font-size: 18px;
+ font-weight: bold;
+ color: #ff671f;
+ min-width: 80px;
+ text-align: right;
+}
+
+.product-action {
+ display: flex;
+ align-items: center;
+}
diff --git a/src/data/products.ts b/src/data/products.ts
new file mode 100644
index 000000000..22398647f
--- /dev/null
+++ b/src/data/products.ts
@@ -0,0 +1,25 @@
+import { Product } from '../types/product';
+
+export const products: Product[] = [
+ {
+ id: 1,
+ title: 'Product 1',
+ description: 'Description for product 1',
+ price: 1000,
+ image: 'https://via.placeholder.com/150'
+ },
+ {
+ id: 2,
+ title: 'Product 2',
+ description: 'Description for product 2',
+ price: 2000,
+ image: 'https://via.placeholder.com/150'
+ },
+ {
+ id: 3,
+ title: 'Product 3',
+ description: 'Description for product 3',
+ price: 3000,
+ image: 'https://via.placeholder.com/150'
+ }
+];
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index c8a8e9634..d8a60aa40 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,10 @@
+
+
+
+ {title}
+{price} ₽
+
+ ({
+ ...item,
+ onRemove: handleRemove,
+ onIncrement: handleIncrement,
+ onDecrement: handleDecrement
+ }))}
+ />
+
+ );
+};
+
+export default BasketPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 000000000..f25b98631
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles/HomePage.css';
+import logo from './banner.svg';
+
+const HomePage: React.FC = () => {
+ return (
+ Корзина
+Итого: {total} ₽
+
+
+
+ );
+};
+
+export default HomePage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 000000000..edf509645
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { loginRequest } from '../store/slices/authSlice';
+import '../styles/LoginPage.css';
+
+const LoginPage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const { loading, error } = useAppSelector((state) => state.auth);
+
+ const from = location.state?.from?.pathname || '/';
+
+ const handleLogin = () => {
+ dispatch(loginRequest());
+ navigate(from, { replace: true });
+ };
+
+ return (
+ Добро пожаловать в Магазин
+Лучшие продукты по лучшим ценам. Выбирайте, заказывайте и наслаждайтесь!
+
+
+ );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/pages/ModalPage.css b/src/pages/ModalPage.css
new file mode 100644
index 000000000..eda72923d
--- /dev/null
+++ b/src/pages/ModalPage.css
@@ -0,0 +1,48 @@
+.modalOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.modalContent {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ max-width: 500px;
+ width: 90%;
+ position: relative;
+}
+
+.closeButton {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #666;
+ transition: color 0.2s ease;
+}
+
+.closeButton:hover {
+ color: #333;
+}
+
+.productTitle {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ color: #333;
+}
+
+.productDescription {
+ color: #666;
+ line-height: 1.5;
+}
\ No newline at end of file
diff --git a/src/pages/ModalPage.tsx b/src/pages/ModalPage.tsx
new file mode 100644
index 000000000..c164195fe
--- /dev/null
+++ b/src/pages/ModalPage.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { products } from '../data/products';
+import { Product } from '../types/product';
+import './ModalPage.css';
+
+type ModalPageParams = {
+ id: string;
+};
+
+const ModalPage: React.FC = () => {
+ const { id } = useParams
+
+ Вход в систему
+ {error &&{error}
}
+
+ Ошибка: ID товара не указан
;
+ }
+
+ const product = products.find((p: Product) => p.id === Number(id));
+
+ if (!product) {
+ return Товар не найден
;
+ }
+
+ const handleClose = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ navigate(-1);
+ };
+
+ return (
+
+
+ );
+};
+
+export default ModalPage;
\ No newline at end of file
diff --git a/src/pages/ProductsPage.tsx b/src/pages/ProductsPage.tsx
new file mode 100644
index 000000000..8a27a75f1
--- /dev/null
+++ b/src/pages/ProductsPage.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/ProductsPage.css";
+import { ItemListDemoButton } from "../components/ItemListContainer/ItemList_Demo_Button";
+
+const ProductsPage: React.FC = () => {
+ return (
+ e.stopPropagation()}>
+
+
+ {product.title}
+{product.description}
+{product.price} ₽
+ +
+
+ );
+};
+
+export default ProductsPage;
\ No newline at end of file
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
new file mode 100644
index 000000000..93da490b5
--- /dev/null
+++ b/src/pages/ProfilePage.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useAppSelector, useAppDispatch } from '../store/hooks';
+import { logout } from '../store/slices/authSlice';
+import { ProtectedRoute } from '../components/ProtectedRoute';
+import '../styles/ProfilePage.css';
+
+export const ProfilePage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const { data: profile, loading } = useAppSelector((state) => state.profile);
+ const { isAdmin } = useAppSelector((state) => state.auth);
+
+ const handleLogout = () => {
+ dispatch(logout());
+ };
+
+ if (loading) {
+ return Товары
+Загрузка...
;
+ }
+
+ return (
+
+
+
+
+ Профиль пользователя
+ {profile && ( +
+ 
+
+ )}
+
+
+
+ Имя: {profile.name}
+Email: {profile.email}
+Роль: {isAdmin ? 'Администратор' : 'Пользователь'}
+