"use client"; import { useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const defaultNav = ["Home", "Blocks", "Docs", "Pricing"]; type FloatingPillNavbarProps = { className?: string; brand?: string; items?: string[]; defaultActive?: string; onActiveChange?: (item: string) => void; ctaLabel?: string; onCtaClick?: () => void; /** Forces the reduced-motion variant. The OS preference is always honored as well. */ reducedMotion?: boolean; }; export function FloatingPillNavbar({ className = "", brand = "Netter", items = defaultNav, defaultActive, onActiveChange, ctaLabel = "Get started", onCtaClick, reducedMotion = false, }: FloatingPillNavbarProps) { const prefersReducedMotion = useReducedMotion(); const shouldReduceMotion = reducedMotion || Boolean(prefersReducedMotion); const nav = items; const [active, setActiveItem] = useState(defaultActive ?? nav[1] ?? nav[0]); function setActive(item: string) { setActiveItem(item); onActiveChange?.(item); } return ( ); }