Krasnikov.pro
3 years ago
parent
52a0498792
commit
e97b7d5688
@ -0,0 +1,3 @@ |
||||
{ |
||||
"extends": "next/core-web-vitals" |
||||
} |
||||
@ -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 |
||||
@ -0,0 +1 @@ |
||||
REACT_APP_BASE_URL=http://localhost:8000 |
||||
@ -0,0 +1 @@ |
||||
REACT_APP_BASE_URL=http://localhost:8000 |
||||
@ -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. |
||||
@ -0,0 +1 @@ |
||||
Сайт для сервиса доставки пиццы. |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -0,0 +1,7 @@ |
||||
import React from 'react'; |
||||
import ContentLoader from 'react-content-loader'; |
||||
import classNames from 'classnames'; |
||||
|
||||
export const SkeletonStock = () => ( |
||||
<></> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
</> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
); |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
); |
||||
}; |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -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; |
||||
@ -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; |
||||
@ -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, |
||||
}; |
||||
@ -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, |
||||
}; |
||||
@ -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, |
||||
}; |
||||
@ -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> |
||||
) |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue