"use client"; import { useRef, useState, type MouseEvent, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; export type OrbitItem = { label: string; href: string; /** Icon in the link (an svg works best). */ icon: ReactNode; }; type OrbitNavigationProps = { items: OrbitItem[]; /** Distance from the centre to each link, in pixels. */ radius?: number; /** Angle of the first link in degrees. -90 is straight up. */ start?: number; /** How much of the circle the links cover, in degrees. 360 = full ring. */ spread?: number; /** Called on click. Call e.preventDefault() to stop the browser following the link. */ onSelect?: (item: OrbitItem, e: MouseEvent) => void; /** Colour of the centre button and ring. */ color?: string; /** Name read out by screen readers. */ label?: string; className?: string; }; /* OrbitNavigation: press the core and the links sweep out round it like moons settling into orbit. */ export function OrbitNavigation({ items, radius = 88, start = -90, spread = 360, onSelect, color = "#a78bfa", label = "Menu", className = "text-white", }: OrbitNavigationProps) { const reduce = useReducedMotion(); const core = useRef(null); const [open, setOpen] = useState(false); const n = items.length; const step = spread >= 360 ? spread / n : spread / Math.max(n - 1, 1); const box = radius * 2 + 64; const close = () => { setOpen(false); core.current?.focus(); }; return ( ); }