"use client"; import { useEffect, useMemo, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronDown, User, CreditCard, UserPlus, KeyRound, Trash2, } from "lucide-react"; import { cn } from "@/lib/utils"; /* Lucide icons satisfy this shape without importing extra type exports. */ type MenuIcon = React.ComponentType<{ className?: string; size?: number | string; strokeWidth?: number; }>; export type MenuItem = { id: string; label: string; icon: MenuIcon; /** Keyboard hint, one chip per string, e.g. ["⌘", "P"]. */ keys?: string[]; /** Renders in red and tints the highlight when it lands here. */ destructive?: boolean; }; export type MenuGroup = { /** Optional small uppercase section label. */ label?: string; items: MenuItem[]; }; export type MenuAccount = { name: string; email: string; initials: string; }; function Kbd({ children }: { children: React.ReactNode }) { return ( {children} ); } export function DropdownMenu({ account, groups, autoplay = true, interval = 1050, className, }: { account: MenuAccount; groups: MenuGroup[]; /** Auto-open and cycle the highlight so a static preview looks alive. */ autoplay?: boolean; interval?: number; className?: string; }) { const flat = useMemo(() => groups.flatMap((g) => g.items), [groups]); const [open, setOpen] = useState(false); const [active, setActive] = useState(-1); const [hovering, setHovering] = useState(false); // Self-driving timeline: open, walk the highlight down, linger, close, repeat. useEffect(() => { if (!autoplay || hovering) return; let t: number; if (!open) { t = window.setTimeout(() => { setOpen(true); setActive(0); }, 820); } else if (active < flat.length - 1) { t = window.setTimeout(() => setActive((a) => a + 1), interval); } else { t = window.setTimeout(() => { setOpen(false); setActive(-1); }, 1400); } return () => window.clearTimeout(t); }, [autoplay, hovering, open, active, interval, flat.length]); const activeItem = active >= 0 && active < flat.length ? flat[active] : null; const activeDestructive = !!activeItem?.destructive; // Stable flat index while rendering nested groups. let idx = -1; return (

setHovering(true)} onMouseLeave={() => setHovering(false)} > {/* trigger */} {/* menu */} {open && ( {/* ambient glow behind the frosted panel */}

{/* top hairline highlight */}

{/* header */}

{account.initials} {account.name} {account.email}

{groups.map((group, gi) => (

{group.label && (

{group.label}

)} {group.items.map((item) => { idx += 1; const i = idx; const isActive = i === active; const Icon = item.icon; const danger = !!item.destructive; return (

setActive(i)} className="relative flex h-9 cursor-default items-center gap-2.5 rounded-lg px-2.5" > {isActive && ( )}

{item.label} {item.keys && (

{item.keys.map((k, ki) => ( {k} ))}

)}

); })}

))}

)}

); } const DEMO_ACCOUNT: MenuAccount = { name: "Avery Quinn", email: "avery@lumenite.dev", initials: "AQ", }; const DEMO_GROUPS: MenuGroup[] = [ { label: "Account", items: [ { id: "profile", label: "Profile", icon: User, keys: ["⌘", "P"] }, { id: "billing", label: "Billing & plans", icon: CreditCard }, ], }, { label: "Workspace", items: [ { id: "invite", label: "Invite teammates", icon: UserPlus, keys: ["⌘", "I"] }, { id: "tokens", label: "API tokens", icon: KeyRound }, ], }, { items: [ { id: "delete", label: "Delete workspace", icon: Trash2, keys: ["⇧", "⌘", "⌫"], destructive: true, }, ], }, ]; export default function Demo() { return (

{/* frosted backdrop: soft color blobs sit behind the panel */}

); }

Dropdown Menu