68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { Minus, Plus, Trash2 } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { useCart } from '@/providers/cart';
|
|
|
|
export default function MyCartComponent() {
|
|
const { cart, updateQuantity, removeItem } = useCart();
|
|
|
|
return (
|
|
<div className='pb-12 pt-28 flex flex-wrap flex-col md:flex-row'>
|
|
<h1 className='text-3xl font-bold mb-8 basis-full'>My Cart</h1>
|
|
<div className='gap-8 basis-3/4 divide-y divide-slate-200 border-y border-slate-200'>
|
|
{cart?.items?.map((item) => (
|
|
<div key={item.id} className='p-4 flex items-center'>
|
|
{item.thumbnail && (
|
|
<img src={item.thumbnail} alt={item.title} className='w-20 h-20 object-cover rounded mr-4' />
|
|
)}
|
|
<div className='flex-grow'>
|
|
<h3 className='font-semibold'>
|
|
{item.product_title} ({item.variant_title})
|
|
</h3>
|
|
<p className='text-sm text-gray-600'>₹{item.unit_price}</p>
|
|
</div>
|
|
<div className='flex items-center'>
|
|
<Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}>
|
|
<Minus className='h-4 w-4' />
|
|
</Button>
|
|
<span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span>
|
|
<Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}>
|
|
<Plus className='h-4 w-4' />
|
|
</Button>
|
|
</div>
|
|
<Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}>
|
|
<Trash2 className='h-4 w-4' />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className='basis-1/4 p-4 bg-[#f5f5f5]'>
|
|
<h3 className='font-semibold leading-none tracking-tight'>Summary</h3>
|
|
<div className='space-y-1'>
|
|
<div className='flex justify-between'>
|
|
<span>Subtotal</span>
|
|
<span>₹{cart?.subtotal?.toFixed(2)}</span>
|
|
</div>
|
|
<div className='flex justify-between'>
|
|
<span>Tax</span>
|
|
<span>₹{cart?.tax_total?.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div className='flex justify-between'>
|
|
<span className='font-semibold'>Total</span>
|
|
<span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
|
|
</div>
|
|
<Link className='w-full mt-4 bg-white' href={'/checkout/email'}>
|
|
Proceed to Checkout
|
|
</Link>
|
|
Need Help? Call us at 9915020200
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|