Add src/app/cart/page.tsx

src/app/cart/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { useState } from "react";
+
+export default function CartPage() {
+  const [cartItems, setCartItems] = useState([
+    { id: "1", name: "Pro Wireless Headphones", price: 199, quantity: 1 },
+    { id: "2", name: "Modern Smartwatch", price: 299, quantity: 1 },
+  ]);
+
+  const total = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setCartItems(prev => prev.map(item => 
+      item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item
+    ));
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="blurBottom"
+        cardStyle="solid"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Cart", id: "/cart" },
+          ]}
+          brandName="SwiftMarket"
+        />
+        
+        <div className="container mx-auto py-20 px-6">
+          <h1 className="text-4xl font-bold mb-10">Your Shopping Cart</h1>
+          <div className="grid gap-6">
+            {cartItems.map(item => (
+              <div key={item.id} className="flex justify-between items-center p-6 border rounded-lg">
+                <div>
+                  <h2 className="text-xl font-semibold">{item.name}</h2>
+                  <p className="text-gray-500">${item.price}</p>
+                </div>
+                <div className="flex items-center gap-4">
+                  <button onClick={() => updateQuantity(item.id, -1)} className="px-3 py-1 border rounded">-</button>
+                  <span className="font-bold">{item.quantity}</span>
+                  <button onClick={() => updateQuantity(item.id, 1)} className="px-3 py-1 border rounded">+</button>
+                </div>
+              </div>
+            ))}
+            <div className="mt-10 border-t pt-6 text-right">
+              <p className="text-2xl font-bold mb-4">Total: ${total}</p>
+              <button className="bg-black text-white px-8 py-3 rounded-full hover:opacity-80">
+                Proceed to Checkout
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <FooterBaseCard
+          logoText="SwiftMarket"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}