You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.0 KiB
74 lines
2.0 KiB
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
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 (
|
|
<li className={"vendor-item " + " "+ " product_card"}>
|
|
<div className='vendor-item__link"'>
|
|
<Image
|
|
className = {'vendor-item__images'}
|
|
src={props.src}
|
|
alt={props.alt}
|
|
width={187}
|
|
height={188}
|
|
/>
|
|
</div>
|
|
<span className={'product_card_box'} >
|
|
<h3>{props.title}</h3>
|
|
<p className={'product_card_text'}>{props.compound}</p>
|
|
<span className={'product_card_video'}>
|
|
<ButtonImg img={'video'}>Видос</ButtonImg>
|
|
</span>
|
|
<span className={'product_card_footer'}>
|
|
<p className={'product_card_price'}>{props.price}</p>
|
|
<Button
|
|
styles={'yellow button_size_32'}
|
|
align={'button_align_right'}
|
|
onClick={() => props.updateData({status:true, id:props.id})}
|
|
>Добавить</Button>
|
|
</span>
|
|
</span>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
|
|
|