"use client" import * as React from "react" import { useRive, Layout, Fit, Alignment } from '@rive-app/react-canvas' import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface MenuItem { riveIcon: { src: string stateMachine: string } label: string hotkey: string onClick?: () => void } interface AnimatedMenuProps extends React.HTMLAttributes { items: MenuItem[] } function RiveIcon({ src, stateMachine, index, activeIndex }: { src: string stateMachine: string index: number activeIndex: number | null }) { const { RiveComponent, rive } = useRive({ src, stateMachines: stateMachine, layout: new Layout({ fit: Fit.Contain, alignment: Alignment.Center }), autoplay: false }) React.useEffect(() => { if (!rive) return if (activeIndex === index) { rive.play(stateMachine) } else { rive.reset() } }, [activeIndex, index, rive, stateMachine]) return } export function AnimatedMenu({ items, className, ...props }: AnimatedMenuProps) { const [hoveredIndex, setHoveredIndex] = React.useState(null) return (

{items.map((item, index) => (

))}

) }