Animated Menu

import { StripeMenu, StripeItem } from "@/components/ui/animated-menu-1";


const ITEMS: StripeItem[] = [
  { id: "3d-motion", title: "3D", brand: "SC3D", activeBg: "#222821", activeText: "#E9E7E2", accent: "#FFD166" },
  { id: "web-design", title: "WEB",  brand: "SC3D", activeBg: "#1E1F23", activeText: "#F0EFEA", accent: "#9B5CFF" },
  { id: "data-analytics", title: "DATA",  brand: "SC3D", activeBg: "#1C2127", activeText: "#F5F4F0", accent: "#4DD0FF" },
  { id: "media", title: "MEDIA",  brand: "SC3D", activeBg: "#242A22", activeText: "#EDEBE6", accent: "#FF6F61" },
  { id: "crm-email", title: "EMAIL",  brand: "SC3D", activeBg: "#212225", activeText: "#EEECE7", accent: "#66FFA6" },
];

export default function DemoOne() {
  return (
    <StripeMenu
      items={ITEMS}
      initialIndex={1}
      defaultOpen={true}
      closeOnEnter={true}
      showIndices={true}
      showScope={true}
      rowHeight={96}
      rowHeightActive={144}
      // Swap font if you want
      fontFamily="'Geist', 'Inter Tight', ui-sans-serif, system-ui"
      // Example callbacks
      onChange={(i, item) => console.log("Focus", i, item.id)}
      onEnter={(i, item) => {
        console.log("Enter", item.id);
        // Navigate your router here
      }}
    />
  );
}