grand commit

components/pages/cart/items.tsx

@@ -1,9 +1,10 @@
 // import styles from '@/components/pages/cart/cart.module.scss'
-import Link from 'next/link'
+import {Minus, Plus} from 'lucide-react'
+import Image from 'next/image'
 
-import useCartStore from '@/store/cart-store'
+import {Link} from '@/i18n/routing'
+import useCartStore, {CartItem} from '@/store/cart-store'
 import {Button} from '@/ui/button'
-import {Input} from '@/ui/input'
 
 export default function CartItems() {
 	const {cartItems} = useCartStore()
@@ -27,7 +28,7 @@ export default function CartItems() {
 			<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'}
+					href={'/catalog'}
 					className='rounded-md bg-orange-500 px-6 py-2 text-white'
 				>
 					Shop
@@ -38,33 +39,45 @@ export default function CartItems() {
 
 	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>
+			{cartItems?.map((item: CartItem, i: number) => (
+				<div className='my-4 flex items-center' key={i}>
+					<div className='col'>
+						{item.title}
+						<Image
+							src={(item?.image || '').replace('.jpg', '-thumb.jpg')}
+							alt=''
+							width={96}
+							height={96}
+							className='rounded-md border'
+							style={{
+								width: '96px',
+								height: '96px',
+								objectFit: 'cover'
+							}}
+						/>
 					</div>
-
-					<div className='text-3 flex-auto text-right font-bold'>
+					<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-2xl leading-none text-brand-violet'
+								onClick={() => onDecreaseQuantity(item.id)}
+							>
+								<Minus />
+							</Button>
+							<div className='mx-4 text-xl font-bold leading-none text-brand-violet'>
+								{item.quantity}
+							</div>
+							<Button
+								variant={'outline'}
+								className='rounded-0 h-[3rem] w-[3rem] text-2xl leading-none 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>