joker

.env

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:8000

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.history/.env_20220518143858

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:8000

.history/.env_20220518144051

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=http://localhost:8000

.history/README_20220710205803.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

.history/README_20220710210115.md

@@ -0,0 +1 @@
+Сайт для сервиса доставки пиццы.

.history/components/Block/Pizza/index_20220516233309.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../redux/cart/selectors';
+import { CartItem } from '../../redux/cart/types';
+import { addItem } from '../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

.history/components/Block/Pizza/index_20220518134250.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCartItemById } from '../../../redux/cart/selectors';
+import { CartItem } from '../../../redux/cart/types';
+import { addItem } from '../../../redux/cart/slice';
+
+const typeNames = ['тонкое', 'традиционное'];
+
+type PizzaBlockProps = {
+  id: string;
+  title: string;
+  price: number;
+  imageUrl: string;
+  sizes: number[];
+  types: number[];
+  rating: number;
+};
+
+export const PizzaBlock: React.FC<PizzaBlockProps> = ({
+  id,
+  title,
+  price,
+  imageUrl,
+  sizes,
+  types,
+}) => {
+  const dispatch = useDispatch();
+  const cartItem = useSelector(selectCartItemById(id));
+  const [activeType, setActiveType] = React.useState(0);
+  const [activeSize, setActiveSize] = React.useState(0);
+
+  const addedCount = cartItem ? cartItem.count : 0;
+
+  const onClickAdd = () => {
+    const item: CartItem = {
+      id,
+      title,
+      price,
+      imageUrl,
+      type: typeNames[activeType],
+      size: sizes[activeSize],
+      count: 0,
+    };
+    dispatch(addItem(item));
+  };
+
+  return (
+    <div className="pizza-block-wrapper">
+      <div className="pizza-block">
+        <Link key={id} to={`/pizza/${id}`}>
+          <img className="pizza-block__image" src={imageUrl} alt="Pizza" />
+          <h4 className="pizza-block__title">{title}</h4>
+        </Link>
+        <div className="pizza-block__selector">
+          <ul>
+            {types.map((typeId) => (
+              <li
+                key={typeId}
+                onClick={() => setActiveType(typeId)}
+                className={activeType === typeId ? 'active' : ''}>
+                {typeNames[typeId]}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            {sizes.map((size, i) => (
+              <li
+                key={size}
+                onClick={() => setActiveSize(i)}
+                className={activeSize === i ? 'active' : ''}>
+                {size} см.
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="pizza-block__bottom">
+          <div className="pizza-block__price">от {price} ₽</div>
+          <button onClick={onClickAdd} className="button button--outline button--add">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
+                fill="white"
+              />
+            </svg>
+            <span>Добавить</span>
+            {addedCount > 0 && <i>{addedCount}</i>}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

.history/components/Block/Stock/Skeleton_20220518134317.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const Skeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518134633.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518140827.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518140848.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518140912.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="0" ry="0" width="280" height="230" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141002.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="0" ry="0" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141016.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141117.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141132.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141143.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    width={345}
+    height={345}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141305.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141344.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className="card_stock"
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141511.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="345" height="345" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141527.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141538.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141558.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141617.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={345}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141623.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141626.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="20" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141636.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141647.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10"  height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141658.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="345" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141705.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="445" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141713.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="45" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141721.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="pizza-block"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="45" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141738.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="45" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141751.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141809.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141817.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className="card_stock"
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141843.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className={classNames('card_stock ')}
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518141856.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className={classNames('card_stock color_green')}
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518142016.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144636.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144700.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+ <></>
+);

.history/components/Block/Stock/Skeleton_20220518144716.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144726.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144743.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+  className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+>
+
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144754.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+  >
+
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144829.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+
+  >
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144838.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+
+
+  >
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144904.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144928.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import classNames from 'classnames';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="245" ry="245" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518144947.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="245" ry="245" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145011.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="245" ry="245" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145240.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+   <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+    <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145319.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+  <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+    <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+    <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145331.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145343.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="42" y="77" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145349.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="77" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145401.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145408.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145422.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="100" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145444.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="100" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145458.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="100" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145509.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145642.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <>
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+  </>
+);

.history/components/Block/Stock/Skeleton_20220518145708.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145737.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+ 
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Skeleton_20220518145757.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const SkeletonStock = () => (
+  <ContentLoader
+    className='card_stoke_skeleton'
+    speed={2}
+    width={245}
+    height={245}
+    viewBox="0 0 245 245"
+  >
+    <rect x="0" y="0" rx="10" ry="10" width="245" height="245" />
+  </ContentLoader>
+);

.history/components/Block/Stock/Stock_20220517171533.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CardStock: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <div className={classNames('card_stock', color)}>
+            <div className={'title_box'}>
+                <p className={'title'}>{title_one}</p>
+                <p className={'title'}>{title_two}</p>
+            </div>
+            <div className = {classNames('img', img)}/>
+            <div className={'sale_box'}>
+                <p>{sale}</p>
+            </div>
+        </div>
+    )
+}

.history/components/Block/Stock/Stock_20220518142538.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    id: number;
+    color: string;
+    title_one: string;
+    title_two: string;
+    img: string;
+    sale: string;
+  };
+
+  export const CardStock: React.FC<Props> = ({color, title_one, title_two, img, sale}) => {
+    return(
+        <div className={classNames('card_stock', color)}>
+            <div className={'title_box'}>
+                <p className={'title'}>{title_one}</p>
+                <p className={'title'}>{title_two}</p>
+            </div>
+            <div className = {classNames('img', img)}/>
+            <div className={'sale_box'}>
+                <p>{sale}</p>
+            </div>
+        </div>
+    )
+}

.history/components/Block/Stock/skeleton_20220518134318.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const Skeleton = () => (
+  <ContentLoader
+    className="pizza-block"
+    speed={2}
+    width={280}
+    height={500}
+    viewBox="0 0 280 500"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb">
+    <circle cx="134" cy="136" r="125" />
+    <rect x="0" y="279" rx="10" ry="10" width="280" height="23" />
+    <rect x="0" y="326" rx="10" ry="10" width="280" height="88" />
+    <rect x="0" y="436" rx="10" ry="10" width="95" height="30" />
+    <rect x="125" y="427" rx="24" ry="24" width="152" height="45" />
+  </ContentLoader>
+);

.history/components/Customer/Header_20220518151433.tsx

@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Customer/Search';
+import { selectCart } from '../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};

.history/components/Customer/Header_20220518151447.tsx

@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Search';
+import { selectCart } from '../../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};

.history/components/Customer/Search/index_20220516232008.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};

.history/components/Customer/Search/index_20220518151434.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { debounce } from "lodash"
+
+import { setSearchValue } from '../../../redux/search/slice';
+
+export const Search: React.FC = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = React.useState<string>('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const onClickClear = () => {
+    dispatch(setSearchValue(''));
+    setValue('');
+    inputRef.current?.focus();
+  };
+
+  const updateSearchValue = React.useCallback(
+    debounce((str: string) => {
+      dispatch(setSearchValue(str));
+    }, 150),
+    [],
+  );
+
+  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    updateSearchValue(event.target.value);
+  };
+
+  return (
+    <div className={'root'}>
+      <svg
+        className={'icon'}
+        enableBackground="new 0 0 32 32"
+        id="EditableLine"
+        version="1.1"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="14"
+          cy="14"
+          fill="none"
+          id="XMLID_42_"
+          r="9"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          fill="none"
+          id="XMLID_44_"
+          stroke="#000000"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          x1="27"
+          x2="20.366"
+          y1="27"
+          y2="20.366"
+        />
+      </svg>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={onChangeInput}
+        className={'input'}
+        placeholder="Поиск пиццы..."
+      />
+      {value && (
+        <svg
+          onClick={onClickClear}
+          className={'clearIcon'}
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+        </svg>
+      )}
+    </div>
+  );
+};

.history/components/Header_20220517160019.tsx

@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Search';
+import { selectCart } from '../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};

.history/components/Header_20220518151434.tsx

@@ -0,0 +1,85 @@
+import { useSelector } from 'react-redux';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+
+import {
+  faBasketShopping,
+  faUser,
+  faLocationDot,
+  faPhone
+} from "@fortawesome/free-solid-svg-icons";
+
+
+import { Search } from './Customer/Search';
+import { selectCart } from '../redux/cart/selectors';
+
+export const Header: React.FC = () => {
+  //const { items, totalPrice } = useSelector(selectCart);
+  const [showBasketCard, setShowBasketCard] = useState(false);
+  const isMounted = React.useRef(false);
+  const updateDataHeader = () => {
+    setShowBasketCard(true);
+    console.log('clik');
+  }
+  //const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);
+
+  //React.useEffect(() => {
+    if (isMounted.current) {
+   //   const json = JSON.stringify(items);
+     // localStorage.setItem('cart', json);
+    }
+    isMounted.current = true;
+ // }, [items]);
+
+  return (
+    <header>
+      <div className={classNames('block logo')}>
+        Logo
+      </div>
+      <div className={classNames('block address')} >
+        <div className={"address_box"}>
+          <FontAwesomeIcon
+            icon={faLocationDot}
+          />
+          <input type='search' className={"input_address"} placeholder="Введите адресс"/>
+        </div>
+      </div>
+      <div className={classNames('block telephone')} >
+        <div className={'description'}>
+          <a href="tel:+7(999)-999-99-99">
+            <FontAwesomeIcon icon={faPhone} />
+            <p className={classNames('link entrance_link')}>8(999)-999-99-99</p>
+            <br></br>
+            <span className={"entrance_link"}>Звонок бесплатный</span>
+          </a>
+        </div>
+      </div>
+      <div className={classNames('block basket')} >
+        <div className={'description'}>
+          <i className="icon">
+            <FontAwesomeIcon
+              icon={faBasketShopping}
+              className={'basket'}
+              onClick={(e) => updateDataHeader()}
+            />
+            <p className={classNames('link entrance_link')}>Корзина</p>
+          </i>
+        </div>
+      </div>
+      <div className={classNames('block entrance')} >
+        <div className={'description'}>
+          <a href="admin">
+            <i className="icon">
+              <FontAwesomeIcon
+                icon={faUser}
+                className={'basket'}
+              />
+            </i>
+            <p className={classNames('link entrance_link')}>Войти</p>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+};

.history/components/UI/ButtonImg_20220529001133.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001136.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001137.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_box', align )}>
+            <button className = {classNames('button', styles )} onClick = {() => onClick()}> {children} </button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001155.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, align, styles, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001202.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, styles, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001207.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img,children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001213.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img,children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001217.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001222.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001224.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001348.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529001412.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/ButtonImg_20220529142855.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+    img: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const ButtonImg: React.FC<Props> = ({onClick, img, children}) => {
+    return(
+        <div className = {'button_img_main'}>
+            <button className={classNames('button_img ', img )} onClick={onClick}>{children}</button>
+        </div>
+    )
+}

.history/components/UI/Button_20220518152348.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const Button = ({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default Button;

.history/components/UI/Button_20220518152711.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC = () => (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default Button;

.history/components/UI/Button_20220518152806.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC = () => (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};

.history/components/UI/Button_20220518152920.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC<Props> = () => (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};

.history/components/UI/Button_20220518152939.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const Button: React.FC<Props> = (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}
+
+Button.propTypes = {
+  onClick: PropTypes.func,
+};

.history/components/UI/Button_20220518153013.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+interface Props {
+    align: string;
+    styles: string;
+    children?: React.ReactNode;
+    onClick: () => void;
+  }
+
+export const Button: React.FC<Props> = (({onClick, align, styles, children}) => {
+    return(
+        <div className= {classNames('button_main', align )}>
+            <button className = {classNames('button', styles )} onClick = {onClick}> {children} </button>
+        </div>
+    )
+}