"use client" import * as React from "react" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" import { LucideIcon } from "lucide-react" interface MenuItem { icon: LucideIcon | React.FC label: string href: string gradient: string iconColor: string } interface MenuBarProps extends React.HTMLAttributes { items: MenuItem[] activeItem?: string onItemClick?: (label: string) => void } const itemVariants = { initial: { rotateX: 0, opacity: 1 }, hover: { rotateX: -90, opacity: 0 }, } const backVariants = { initial: { rotateX: 90, opacity: 0 }, hover: { rotateX: 0, opacity: 1 }, } const glowVariants = { initial: { opacity: 0, scale: 0.8 }, hover: { opacity: 1, scale: 2, transition: { opacity: { duration: 0.5, ease: [0.4, 0, 0.2, 1] }, scale: { duration: 0.5, type: "spring", stiffness: 300, damping: 25 }, }, }, } const navGlowVariants = { initial: { opacity: 0 }, hover: { opacity: 1, transition: { duration: 0.5, ease: [0.4, 0, 0.2, 1], }, }, } const sharedTransition = { type: "spring", stiffness: 100, damping: 20, duration: 0.5, } export const MenuBar = React.forwardRef( ({ className, items, activeItem, onItemClick, ...props }, ref) => { const { theme } = useTheme() const isDarkTheme = theme === "dark" return (

) }, ) MenuBar.displayName = "MenuBar"