85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
// import styles from '@/components/pages/cart/cart.module.scss'
|
||
import {Minus, Plus, X} from 'lucide-react'
|
||
import Image from 'next/image'
|
||
|
||
import useCartStore, {CartItem} from '@/store/cart-store'
|
||
import {Button} from '@/ui/button'
|
||
|
||
export default function CartItems({cartItems}: {cartItems: CartItem[]}) {
|
||
const {increaseQuantity, decreaseQuantity, removeItemFromCart} =
|
||
useCartStore()
|
||
|
||
const onIncreaseQuantity = (productId: number) => {
|
||
increaseQuantity(productId)
|
||
}
|
||
|
||
const onDecreaseQuantity = (productId: number) => {
|
||
decreaseQuantity(productId)
|
||
}
|
||
|
||
const onRemoveItem = (productId: number) => {
|
||
removeItemFromCart(productId)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{cartItems?.map((item: CartItem, i: number) => (
|
||
<article key={i} className='bxg-emerald-200 mb-6'>
|
||
<h3 className='bxg-brand-yellow-300 flex w-full items-center justify-between text-foreground'>
|
||
<div className='text-lg font-medium'>{item.title}</div>
|
||
<div className='w-16 flex-none text-right'>
|
||
<Button
|
||
variant={'ghost'}
|
||
className='rounded-0 h-[3rem] w-[3rem] px-0 text-brand-violet'
|
||
onClick={() => onRemoveItem(item.id)}
|
||
/*title={t('clear_cart')}*/
|
||
>
|
||
<X />
|
||
</Button>
|
||
</div>
|
||
</h3>
|
||
<div className='flex items-center'>
|
||
<div className='col'>
|
||
<Image
|
||
src={(item?.image || '').replace('.jpg', '-thumb.jpg')}
|
||
alt=''
|
||
width={64}
|
||
height={64}
|
||
style={{
|
||
width: '64px',
|
||
height: '64px',
|
||
objectFit: 'cover'
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className='flex-none'>
|
||
<div className='flex w-16 flex-none items-center justify-center'>
|
||
<Button
|
||
variant={'outline'}
|
||
className='rounded-0 h-[3rem] w-[3rem] text-brand-violet'
|
||
onClick={() => onDecreaseQuantity(item.id)}
|
||
>
|
||
<Minus />
|
||
</Button>
|
||
<div className='mx-4 text-xl font-bold text-brand-violet'>
|
||
{item.quantity}
|
||
</div>
|
||
<Button
|
||
variant={'outline'}
|
||
className='rounded-0 h-[3rem] w-[3rem] text-brand-violet'
|
||
onClick={() => onIncreaseQuantity(item.id)}
|
||
>
|
||
<Plus />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className='col text-right text-lg font-bold'>
|
||
{(item.price * item.quantity).toFixed(2)} грн
|
||
</div>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</>
|
||
)
|
||
}
|