bender/437f4e98-ef5c-4514-9247-4a4844a40e22
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Switch to version 1: remove src/app/cart/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 09:33:43 +00:00
parent 555e52f4cd
commit 6d5ac1aef9
1 changed files with 0 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/app/cart/page.tsx
View File

@@ -1,137 +0,0 @@
'use client';
import { useState } from 'react';
import { ThemeProvider } from '@/components/theme';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { Trash2 } from 'lucide-react';
interface CartItem {
id: string;
name: string;
price: number;
quantity: number;
imageSrc: string;
}
export default function CartPage() {
const [cartItems, setCartItems] = useState<CartItem[]>([
{ id: '1', name: 'Product 1', price: 29.99, quantity: 1, imageSrc: '/placeholder.jpg' },
{ id: '2', name: 'Product 2', price: 49.99, quantity: 2, imageSrc: '/placeholder.jpg' },
]);
const updateQuantity = (id: string, quantity: number) => {
if (quantity <= 0) {
removeItem(id);
} else {
setCartItems(cartItems.map(item => item.id === id ? { ...item, quantity } : item));
}
};
const removeItem = (id: string) => {
setCartItems(cartItems.filter(item => item.id !== id));
};
const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
const tax = subtotal * 0.1;
const total = subtotal + tax;
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarLayoutFloatingInline
navItems={[
{ name: 'Home', id: '/' },
{ name: 'Shop', id: '/shop' },
{ name: 'Cart', id: '/cart' },
{ name: 'Checkout', id: '/checkout' },
]}
brandName="Store"
button={{ text: 'Get Started', href: '/' }}
animateOnLoad={true}
/>
<div className="min-h-screen pt-20 px-6">
<div className="max-w-4xl mx-auto">
<h1 className="text-4xl font-bold mb-12">Shopping Cart</h1>
{cartItems.length === 0 ? (
<div className="text-center py-12">
<p className="text-lg text-gray-500">Your cart is empty</p>
</div>
) : (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Cart Items */}
<div className="lg:col-span-2 space-y-4">
{cartItems.map((item) => (
<div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg shadow">
<div className="w-20 h-20 bg-gray-200 rounded flex-shrink-0"></div>
<div className="flex-1">
<h3 className="font-semibold text-lg">{item.name}</h3>
<p className="text-gray-600">${item.price.toFixed(2)}</p>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center border rounded">
<button
onClick={() => updateQuantity(item.id, item.quantity - 1)}
className="px-3 py-1 hover:bg-gray-100"
>
−
</button>
<span className="px-3 py-1 border-l border-r">{item.quantity}</span>
<button
onClick={() => updateQuantity(item.id, item.quantity + 1)}
className="px-3 py-1 hover:bg-gray-100"
>
+
</button>
</div>
<button
onClick={() => removeItem(item.id)}
className="p-2 hover:bg-red-50 text-red-500 rounded"
>
<Trash2 size={20} />
</button>
</div>
</div>
))}
</div>
{/* Cart Summary */}
<div className="lg:col-span-1">
<div className="bg-white rounded-lg shadow p-6 sticky top-24">
<h2 className="text-xl font-bold mb-6">Order Summary</h2>
<div className="space-y-3 mb-6">
<div className="flex justify-between">
<span>Subtotal</span>
<span>${subtotal.toFixed(2)}</span>
</div>
<div className="flex justify-between">
<span>Tax (10%)</span>
<span>${tax.toFixed(2)}</span>
</div>
<div className="border-t pt-3 flex justify-between font-bold text-lg">
<span>Total</span>
<span>${total.toFixed(2)}</span>
</div>
</div>
<button className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 font-semibold">
Proceed to Checkout
</button>
</div>
</div>
</div>
)}
</div>
</div>
</ThemeProvider>
);
}