stuff done

components/pages/cart/items.tsx

@@ -1,16 +1,14 @@
 // import styles from '@/components/pages/cart/cart.module.scss'
-import {Minus, Plus} from 'lucide-react'
+import {Minus, Plus, X} from 'lucide-react'
 import Image from 'next/image'
 
-import {Link} from '@/i18n/routing'
 import useCartStore, {CartItem} from '@/store/cart-store'
 import {Button} from '@/ui/button'
 
-export default function CartItems() {
-	const {cartItems} = useCartStore()
-
+export default function CartItems({cartItems}: {cartItems: CartItem[]}) {
 	const {increaseQuantity, decreaseQuantity, removeItemFromCart} =
 		useCartStore()
+
 	const onIncreaseQuantity = (productId: number) => {
 		increaseQuantity(productId)
 	}
@@ -23,22 +21,33 @@ export default function CartItems() {
 		removeItemFromCart(productId)
 	}
 
-	if (cartItems && cartItems.length > 0) {
-		return (
-			<>
-				{cartItems?.map((item: CartItem, i: number) => (
-					<div className='my-4 flex items-center' key={i}>
+	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'>
-							{item.title}
 							<Image
 								src={(item?.image || '').replace('.jpg', '-thumb.jpg')}
 								alt=''
-								width={96}
-								height={96}
-								className='rounded-md border'
+								width={64}
+								height={64}
 								style={{
-									width: '96px',
-									height: '96px',
+									width: '64px',
+									height: '64px',
 									objectFit: 'cover'
 								}}
 							/>
@@ -47,17 +56,17 @@ export default function CartItems() {
 							<div className='flex w-16 flex-none items-center justify-center'>
 								<Button
 									variant={'outline'}
-									className='rounded-0 h-[3rem] w-[3rem] text-2xl leading-none text-brand-violet'
+									className='rounded-0 h-[3rem] w-[3rem] text-brand-violet'
 									onClick={() => onDecreaseQuantity(item.id)}
 								>
 									<Minus />
 								</Button>
-								<div className='mx-4 text-xl font-bold leading-none text-brand-violet'>
+								<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-2xl leading-none text-brand-violet'
+									className='rounded-0 h-[3rem] w-[3rem] text-brand-violet'
 									onClick={() => onIncreaseQuantity(item.id)}
 								>
 									<Plus />
@@ -68,19 +77,8 @@ export default function CartItems() {
 							{(item.price * item.quantity).toFixed(2)} грн
 						</div>
 					</div>
-				))}
-			</>
-		)
-	}
-	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={'/catalog'}
-				className='rounded-md bg-orange-500 px-6 py-2 text-white'
-			>
-				Продовжити покупки
-			</Link>
-		</div>
+				</article>
+			))}
+		</>
 	)
 }