"use client"; import { useMemo, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Minus, Plus, ShoppingBag, X } from "lucide-react"; import { cn } from "@/lib/utils"; interface CartLine { id: string; name: string; price: number; qty: number; } const INITIAL_LINES: CartLine[] = [ { id: "1", name: "Lumen Vial, 10ml", price: 68 }, { id: "2", name: "BAC Water, 3ml", price: 14 }, { id: "3", name: "Sterile Vial Kit", price: 22 }, ].map((l) => ({ ...l, qty: 1 })); function MiniVisual({ tint }: { tint: string }) { return (

); } const TINTS = ["#5b8cff", "#7c6cff", "#5bffd0"]; export function CartDrawer({ open, onClose, className, }: { open: boolean; onClose: () => void; className?: string; }) { const [lines, setLines] = useState(INITIAL_LINES); function updateQty(id: string, delta: number) { setLines((prev) => prev .map((l) => (l.id === id ? { ...l, qty: Math.max(0, l.qty + delta) } : l)) .filter((l) => l.qty > 0) ); } const subtotal = useMemo( () => lines.reduce((sum, l) => sum + l.price * l.qty, 0), [lines] ); return ( {open && ( <>

Your cart

{lines.map((line, i) => (

{line.name}

${line.price.toFixed(2)}

{line.qty}

))} {lines.length === 0 && (

Your cart is empty.

)}

Subtotal ${subtotal.toFixed(2)}

)} ); } export default function Demo() { const [open, setOpen] = useState(true); return (

setOpen(false)} />

); }

Cart Drawer