Made background white
cart page updated
This commit is contained in:
parent
029bb0aa29
commit
fa502e6d72
@ -3,7 +3,6 @@
|
||||
import { Minus, Plus, Trash2 } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useCart } from '@/providers/cart';
|
||||
|
||||
@ -11,69 +10,56 @@ export default function MyCartComponent() {
|
||||
const { cart, updateQuantity, removeItem } = useCart();
|
||||
|
||||
return (
|
||||
<div className='container mx-auto px-4 py-8'>
|
||||
<h1 className='text-3xl font-bold mb-8'>My Cart</h1>
|
||||
<div className='grid gap-8 md:grid-cols-3'>
|
||||
<div className='md:col-span-2'>
|
||||
{cart?.items?.map((item) => (
|
||||
<Card key={item.id} className='mb-4'>
|
||||
<CardContent className='p-4'>
|
||||
<div className='flex items-center'>
|
||||
{/* <img
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<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>
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Order Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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>
|
||||
</CardContent>
|
||||
<Separator />
|
||||
<CardFooter className='justify-between'>
|
||||
<span className='font-semibold'>Total</span>
|
||||
<span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Button className='w-full mt-4' size='lg'>
|
||||
Proceed to Checkout
|
||||
</Button>
|
||||
<Separator />
|
||||
<div className='flex justify-between'>
|
||||
<span className='font-semibold'>Total</span>
|
||||
<span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
|
||||
</div>
|
||||
<Button className='w-full mt-4 bg-white' size='lg'>
|
||||
Proceed to Checkout
|
||||
</Button>
|
||||
Need Help? Call us at 9915020200
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -32,7 +32,7 @@ async function fetchProducts() {
|
||||
export default async function ProductsPage() {
|
||||
const products: HttpTypes.StoreProduct[] = await fetchProducts();
|
||||
return (
|
||||
<div className='py-12 pt-28'>
|
||||
<div className='pb-12 pt-28'>
|
||||
{/* Products Grid */}
|
||||
<div
|
||||
className='grid gap-8 mb-8'
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: 20, 18%, 97%;
|
||||
/* --background: 20, 18%, 97%; */
|
||||
--background: 0, 0%, 100%;
|
||||
/* --foreground: 358, 39%, 32%; */
|
||||
--foreground: 358, 39%, 32%;
|
||||
--normal-font: 1.25rem;
|
||||
--title-font: 3rem;
|
||||
@ -13,7 +15,9 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 20, 18%, 97%;
|
||||
/* --background: 20, 18%, 97%; */
|
||||
--background: 0, 0%, 100%;
|
||||
/* --foreground: 358, 39%, 32%; */
|
||||
--foreground: 358, 39%, 32%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user