tanshu/kakawa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made background white

Browse Source 
cart page updated
This commit is contained in:
Amritanshu Agrawal
2024-10-26 16:14:44 +05:30
parent 029bb0aa29
commit fa502e6d72
3 changed files with 55 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/app/(storefront)/cart/page.tsx
View File

@ -3,7 +3,6 @@
import { Minus, Plus, Trash2 } from 'lucide-react'; import { Minus, Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator'; import { Separator } from '@/components/ui/separator';
import { useCart } from '@/providers/cart'; import { useCart } from '@/providers/cart';
@ -11,69 +10,56 @@ export default function MyCartComponent() {
const { cart, updateQuantity, removeItem } = useCart(); const { cart, updateQuantity, removeItem } = useCart();
return ( return (
<div className='container mx-auto px-4 py-8'> <div className='pb-12 pt-28 flex flex-wrap flex-col md:flex-row'>
<h1 className='text-3xl font-bold mb-8'>My Cart</h1> <h1 className='text-3xl font-bold mb-8 basis-full'>My Cart</h1>
<div className='grid gap-8 md:grid-cols-3'> <div className='gap-8 basis-3/4 divide-y divide-slate-200 border-y border-slate-200'>
<div className='md:col-span-2'> {cart?.items?.map((item) => (
{cart?.items?.map((item) => ( <div key={item.id} className='p-4 flex items-center'>
<Card key={item.id} className='mb-4'> {item.thumbnail && (
<CardContent className='p-4'> <img src={item.thumbnail} alt={item.title} className='w-20 h-20 object-cover rounded mr-4' />
<div className='flex items-center'> )}
{/* <img <div className='flex-grow'>
src={item.image} <h3 className='font-semibold'>
alt={item.name} {item.product_title} ({item.variant_title})
className="w-20 h-20 object-cover rounded mr-4" </h3>
/> */} <p className='text-sm text-gray-600'>₹{item.unit_price}</p>
<div className='flex-grow'> </div>
<h3 className='font-semibold'> <div className='flex items-center'>
{item.product_title} ({item.variant_title}) <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}>
</h3> <Minus className='h-4 w-4' />
<p className='text-sm text-gray-600'>₹{item.unit_price}</p> </Button>
</div> <span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span>
<div className='flex items-center'> <Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}>
<Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity - 1)}> <Plus className='h-4 w-4' />
<Minus className='h-4 w-4' /> </Button>
</Button> </div>
<span className='mx-2 min-w-[2ch] text-center'>{item.quantity}</span> <Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}>
<Button variant='outline' size='icon' onClick={() => updateQuantity(item.id, item.quantity + 1)}> <Trash2 className='h-4 w-4' />
<Plus className='h-4 w-4' /> </Button>
</Button> </div>
</div> ))}
<Button variant='ghost' size='icon' className='ml-4' onClick={() => removeItem(item.id)}> </div>
<Trash2 className='h-4 w-4' /> <div className='basis-1/4 p-4 bg-[#f5f5f5]'>
</Button> <h3 className='font-semibold leading-none tracking-tight'>Summary</h3>
</div> <div className='space-y-1'>
</CardContent> <div className='flex justify-between'>
</Card> <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>
<div> <Separator />
<Card> <div className='flex justify-between'>
<CardHeader> <span className='font-semibold'>Total</span>
<CardTitle>Order Summary</CardTitle> <span className='font-semibold'>₹{cart?.total?.toFixed(2)}</span>
</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>
</div> </div>
<Button className='w-full mt-4 bg-white' size='lg'>
Proceed to Checkout
</Button>
Need Help? Call us at 9915020200
</div> </div>
</div> </div>
); );

2
src/app/(storefront)/products/page.tsx
View File

@ -32,7 +32,7 @@ async function fetchProducts() {
export default async function ProductsPage() { export default async function ProductsPage() {
const products: HttpTypes.StoreProduct[] = await fetchProducts(); const products: HttpTypes.StoreProduct[] = await fetchProducts();
return ( return (
<div className='py-12 pt-28'> <div className='pb-12 pt-28'>
{/* Products Grid */} {/* Products Grid */}
<div <div
className='grid gap-8 mb-8' className='grid gap-8 mb-8'

8
src/app/globals.css
View File

@ -3,7 +3,9 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--background: 20, 18%, 97%; /* --background: 20, 18%, 97%; */
--background: 0, 0%, 100%;
/* --foreground: 358, 39%, 32%; */
--foreground: 358, 39%, 32%; --foreground: 358, 39%, 32%;
--normal-font: 1.25rem; --normal-font: 1.25rem;
--title-font: 3rem; --title-font: 3rem;
@ -13,7 +15,9 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: 20, 18%, 97%; /* --background: 20, 18%, 97%; */
--background: 0, 0%, 100%;
/* --foreground: 358, 39%, 32%; */
--foreground: 358, 39%, 32%; --foreground: 358, 39%, 32%;
} }
} }