Update app/cart/page.tsx

app/cart/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { useCart } from "@/lib/use-cart";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Button } from "@/components/ui/button";
+import { Footer } from "@/components/footer";
+import { Trash2, Plus, Minus, ShoppingBag, ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+export default function CartPage() {
+  const { cart, updateQuantity, removeFromCart, total } = useCart();
+
+  if (cart.length === 0) {
+    return (
+      <main className="min-h-screen bg-neutral-50">
+        <Container className="py-20 text-center">
+          <div className="bg-white p-12 rounded-3xl shadow-sm max-w-md mx-auto">
+            <div className="w-20 h-20 bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-6">
+              <ShoppingBag className="w-10 h-10 text-neutral-400" />
+            </div>
+            <Heading level={2} className="text-2xl mb-4">Your cart is empty</Heading>
+            <p className="text-neutral-500 mb-8">Looks like you haven't added anything to your cart yet.</p>
+            <Button asChild className="rounded-full px-8">
+              <Link href="/products">Start Shopping</Link>
+            </Button>
+          </div>
+        </Container>
+        <Footer />
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <Container className="py-12">
+        <Heading className="mb-8">Shopping Cart</Heading>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-4">
+            {cart.map((item) => (
+              <div key={item.id} className="bg-white p-4 rounded-2xl shadow-sm flex gap-4 items-center">
+                <div className="w-24 h-24 rounded-xl overflow-hidden bg-neutral-100 flex-shrink-0">
+                  <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-neutral-900 truncate">{item.name}</h3>
+                  <p className="text-sm text-neutral-500">{item.category}</p>
+                  <div className="mt-2 flex items-center gap-4">
+                    <div className="flex items-center border rounded-full px-2 py-1">
+                      <button 
+                        onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                        className="p-1 hover:text-blue-600"
+                      >
+                        <Minus className="w-3 h-3" />
+                      </button>
+                      <span className="w-8 text-center text-sm font-medium">{item.quantity}</span>
+                      <button 
+                        onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                        className="p-1 hover:text-blue-600"
+                      >
+                        <Plus className="w-3 h-3" />
+                      </button>
+                    </div>
+                    <button 
+                      onClick={() => removeFromCart(item.id)}
+                      className="text-red-500 hover:text-red-600 p-1"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="font-bold text-neutral-900">₹{item.price * item.quantity}</div>
+                  <div className="text-xs text-neutral-400">₹{item.price} each</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="lg:col-span-1">
+            <div className="bg-white p-6 rounded-3xl shadow-sm sticky top-24">
+              <h3 className="font-bold text-lg mb-6">Order Summary</h3>
+              <div className="space-y-4 mb-6">
+                <div className="flex justify-between text-neutral-600">
+                  <span>Subtotal</span>
+                  <span>₹{total}</span>
+                </div>
+                <div className="flex justify-between text-neutral-600">
+                  <span>Shipping</span>
+                  <span className="text-green-600 font-medium">FREE</span>
+                </div>
+                <div className="flex justify-between text-neutral-600">
+                  <span>Tax (GST)</span>
+                  <span>₹{Math.round(total * 0.18)}</span>
+                </div>
+                <div className="pt-4 border-t flex justify-between font-bold text-xl text-neutral-900">
+                  <span>Total</span>
+                  <span>₹{total + Math.round(total * 0.18)}</span>
+                </div>
+              </div>
+              <Button asChild className="w-full rounded-full py-6 text-lg">
+                <Link href="/checkout" className="flex items-center justify-center gap-2">
+                  Checkout <ArrowRight className="w-5 h-5" />
+                </Link>
+              </Button>
+              <p className="text-[10px] text-neutral-400 text-center mt-4">
+                Secure checkout powered by BharatPay
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Footer />
+    </main>
+  );
+}