"use client"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Trash2, Plus, Minus, Package, CreditCard, Truck, Shield, } from "lucide-react"; import Image from "next/image"; import { useState } from "react"; interface CartItem { id: string; name: string; price: number; originalPrice?: number; quantity: number; image: string; color: string; size: string; stock: number; } interface ShippingMethod { id: string; name: string; price: number; estimatedDays: string; description: string; } export default function ModernCart() { const [items, setItems] = useState([ { id: "1", name: "Classic Chronograph Watch", price: 299.99, originalPrice: 399.99, quantity: 1, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30", color: "Black", size: "Standard", stock: 5, }, { id: "2", name: "Sport Diver Watch", price: 199.99, quantity: 2, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30", color: "Blue", size: "Standard", stock: 3, }, ]); const [shippingMethod, setShippingMethod] = useState("standard"); const shippingMethods: ShippingMethod[] = [ { id: "standard", name: "Standard Shipping", price: 5.99, estimatedDays: "3-5 days", description: "Free shipping on orders over $200", }, { id: "express", name: "Express Shipping", price: 12.99, estimatedDays: "1-2 days", description: "Priority delivery with tracking", }, ]; const subtotal = items.reduce( (sum, item) => sum + item.price * item.quantity, 0, ); const shipping = shippingMethods.find((m) => m.id === shippingMethod)?.price || 0; const total = subtotal + shipping; const updateQuantity = (id: string, change: number) => { setItems((prev) => prev.map((item) => { if (item.id === id) { const newQuantity = Math.max( 1, Math.min(item.stock, item.quantity + change), ); return { ...item, quantity: newQuantity }; } return item; }), ); }; const removeItem = (id: string) => { setItems((prev) => prev.filter((item) => item.id !== id)); }; return (

{/* Main Cart Section */}

Shopping Cart

{items.length} {items.length === 1 ? "item" : "items"} in your cart

{items.map((item) => (

{/* Product Image */}

{/* Product Details */}

{item.name}

{item.color} • {item.size}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

{item.originalPrice && (

${(item.originalPrice * item.quantity).toFixed(2)}

)}

))}

{/* Order Summary */}

Order Summary Review your order details and shipping information {/* Shipping Method */}

Shipping Method

{/* Promo Code */}

Promo Code

{/* Order Summary */}

Subtotal ${subtotal.toFixed(2)}

Shipping ${shipping.toFixed(2)}

Total ${total.toFixed(2)}

{/* Features */}

Free returns within 30 days

Secure payment

Fast delivery

{/* Checkout Button */}

); }

Shopping Cart

Modern Cart

Compact CartPreview

Floating CartPreview

Mini CartPreview

Sidebar CartPreview

Sticky CartPreview