import { useLayoutEffect, useRef, useState, type KeyboardEvent } from "react"; import { cn } from "@/lib/utils"; /** Sliding tabs: one white pill glides to the chosen tab (measured, then translated). Arrow keys move; scrolls sideways on narrow screens. */ export function SlidingTabs({ value, options, onChange, label }: { value: T; options: readonly { value: T; label: string }[]; onChange: (v: T) => void; label: string }) { const refs = useRef>({}); const [box, setBox] = useState({ x: 0, w: 0, ready: false }); useLayoutEffect(() => { const measure = () => { const el = refs.current[value]; if (!el) return; setBox({ x: el.offsetLeft, w: el.offsetWidth, ready: true }); }; measure(); window.addEventListener("resize", measure); document.fonts?.ready.then(measure); return () => window.removeEventListener("resize", measure); }, [value, options]); const onKey = (e: KeyboardEvent) => { const i = options.findIndex((o) => o.value === value); const n = e.key === "ArrowRight" ? i + 1 : e.key === "ArrowLeft" ? i - 1 : i; if (n !== i && options[n]) { e.preventDefault(); onChange(options[n].value); refs.current[options[n].value]?.focus(); } }; return (

{options.map((o) => ( ))}

); }