cart mechanism complete

components/pages/cart/cart.module.scss

@@ -0,0 +1,4 @@
+input.bw-cart-item-counter{
+  font-size: 36px;
+  background: chocolate;
+}

components/pages/cart/items.tsx

@@ -0,0 +1,74 @@
+// 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>
+			))}
+		</>
+	)
+}