"use client"; import { motion } from "motion/react"; import { Bell, Flame, Folder, Hexagon, Image, Layers, Magnet, Mic, Plus, Search, Sparkles, } from "lucide-react"; import { type ComponentType, useMemo, useState } from "react"; type FlowerItem = { id: string; icon: ComponentType<{ className?: string }>; }; const ITEMS: FlowerItem[] = [ { id: "bell", icon: Bell }, { id: "sparkles", icon: Sparkles }, { id: "mic", icon: Mic }, { id: "magnet", icon: Magnet }, { id: "folder", icon: Folder }, { id: "image", icon: Image }, { id: "search", icon: Search }, { id: "flame", icon: Flame }, { id: "hexagon", icon: Hexagon }, { id: "layers", icon: Layers }, ]; const EASE = [0.22, 1, 0.36, 1] as const; // One soft cast shadow alone left the discs reading as blurred blobs with no edge. A lit top rim and a // 1px contact shadow give them a surface; the cast one then only has to say how far off the page they sit. const DISC = "inset 0 1px 0 rgb(255 255 255/0.9), inset 0 -1px 0 rgb(0 0 0/0.04), 0 1px 2px rgb(0 0 0/0.1), 0 7px 16px -5px rgb(0 0 0/0.18)"; const DISC_DARK = "inset 0 1px 0 rgb(255 255 255/0.1), 0 1px 2px rgb(0 0 0/0.4), 0 8px 18px -5px rgb(0 0 0/0.5)"; const RADIUS = 88; const STEP = (Math.PI * 2) / ITEMS.length; export default function FlowerMenu() { const [open, setOpen] = useState(false); const points = useMemo( () => ITEMS.map((item, index) => { const angle = -Math.PI / 2 + index * STEP; return { ...item, x: Math.cos(angle) * RADIUS, y: Math.sin(angle) * RADIUS, }; }), [], ); return (

{points.map((point, index) => { const Icon = point.icon; return ( ); })} setOpen((prev) => !prev)} style={{ boxShadow: `var(--disc-shadow, ${DISC})` }} className="absolute left-0 top-0 z-20 flex h-[58px] w-[58px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-[999px] border border-zinc-200 bg-white text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100" whileTap={{ scale: 0.95 }} >

); }