75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
// import styles from '@/components/pages/cart/cart.module.scss'
|
||
import Link from 'next/link'
|
||
|
||
import useCartStore from '@/store/cart-store'
|
||
import {Button} from '@/ui/button'
|
||
import {Input} from '@/ui/input'
|
||
|
||
export default function CartItems() {
|
||
const {cartItems} = useCartStore()
|
||
|
||
const {increaseQuantity, decreaseQuantity, removeItemFromCart} =
|
||
useCartStore()
|
||
const onIncreaseQuantity = (productId: number) => {
|
||
increaseQuantity(productId)
|
||
}
|
||
|
||
const onDecreaseQuantity = (productId: number) => {
|
||
decreaseQuantity(productId)
|
||
}
|
||
|
||
const onRemoveItem = (productId: number) => {
|
||
removeItemFromCart(productId)
|
||
}
|
||
|
||
if (cartItems && cartItems.length < 1) {
|
||
return (
|
||
<div className='flex h-72 flex-col items-center justify-center'>
|
||
<h2 className='mb-5 mt-10 text-3xl font-bold'>Cart is Empty</h2>
|
||
<Link
|
||
href={'/products'}
|
||
className='rounded-md bg-orange-500 px-6 py-2 text-white'
|
||
>
|
||
Shop
|
||
</Link>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{cartItems?.map((item, i) => (
|
||
<div
|
||
key={i}
|
||
className='bsdg-brand-violet-200 bw-cart-item-counter my-4 flex items-center gap-4 py-4'
|
||
>
|
||
<div className='flex-auto bg-brand-violet-100'>{item.title}</div>
|
||
<div className='flex w-16 flex-none items-center justify-center'>
|
||
<Button
|
||
variant={'outline'}
|
||
className='rounded-0'
|
||
onClick={() => onDecreaseQuantity(item.id)}
|
||
>
|
||
-
|
||
</Button>
|
||
<div className='mx-4 border-0 text-xl font-bold leading-none text-brand-violet'>
|
||
{item.quantity}
|
||
</div>
|
||
<Button
|
||
variant={'outline'}
|
||
className='rounded-0'
|
||
onClick={() => onIncreaseQuantity(item.id)}
|
||
>
|
||
+
|
||
</Button>
|
||
</div>
|
||
|
||
<div className='text-3 flex-auto text-right font-bold'>
|
||
{(item.price * item.quantity).toFixed(2)} грн
|
||
</div>
|
||
</div>
|
||
))}
|
||
</>
|
||
)
|
||
}
|