"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Check, Plus, Star, X } from "lucide-react"; import { cn } from "@/lib/utils"; interface QuickProduct { id: string; name: string; price: string; rating: number; specs: { label: string; value: string }[]; } const PRODUCT: QuickProduct = { id: "lumen-vial", name: "Lumen Bottle, 10ml", price: "$68.00", rating: 5, specs: [ { label: "Volume", value: "10 ml" }, { label: "Material", value: "Borosilicate" }, { label: "Finish", value: "Frosted" }, { label: "Shipping", value: "Worldwide" }, ], }; function GalleryVisual({ tone }: { tone: number }) { return (

); } export function ProductQuickview({ className }: { className?: string }) { const [open, setOpen] = useState(false); const [dot, setDot] = useState(0); const [added, setAdded] = useState(false); const [userTook, setUserTook] = useState(false); // Auto-demonstrate the quick view on a loop until the user interacts. useEffect(() => { if (userTook) return; let cancelled = false; const wait = (ms: number) => new Promise((r) => setTimeout(r, ms)); (async () => { while (!cancelled) { await wait(1400); if (cancelled) break; setOpen(true); await wait(1700); if (cancelled) break; setDot((d) => (d + 1) % 3); await wait(1500); if (cancelled) break; setOpen(false); await wait(1200); } })(); return () => { cancelled = true; }; }, [userTook]); function handleAdd() { setUserTook(true); if (added) return; setAdded(true); setTimeout(() => setAdded(false), 1800); } return (

{ setUserTook(true); setOpen(true); }} className="w-48 rounded-2xl border border-line bg-panel p-3 text-left" whileHover={{ y: -4 }} > {PRODUCT.name}

{PRODUCT.price}

Click for quick view

{open && ( <> { setUserTook(true); setOpen(false); }} className="absolute inset-0 z-10 bg-black/60 backdrop-blur-sm" />

{[0, 1, 2].map((i) => (

{PRODUCT.name}

{Array.from({ length: 5 }).map((_, i) => ( ))}

{PRODUCT.price}

{PRODUCT.specs.map((s) => (

{s.label} {s.value}

))}

)}

); } export default function Demo() { return (

); }

Product Quick View

Lumen Bottle, 10ml