"use client" import * as React from "react" import { motion, AnimatePresence } from "framer-motion" import { cn } from "@/lib/utils" export interface MenuBarItem { icon: (props: React.SVGProps) => JSX.Element label: string } interface MenuBarProps extends React.HTMLAttributes { items: MenuBarItem[] } const springConfig = { duration: 0.3, ease: "easeInOut" } export function MenuBar({ items, className, ...props }: MenuBarProps) { const [activeIndex, setActiveIndex] = React.useState(null) const menuRef = React.useRef(null) const [tooltipPosition, setTooltipPosition] = React.useState({ left: 0, width: 0 }) const tooltipRef = React.useRef(null) React.useEffect(() => { if (activeIndex !== null && menuRef.current && tooltipRef.current) { const menuItem = menuRef.current.children[activeIndex] as HTMLElement const menuRect = menuRef.current.getBoundingClientRect() const itemRect = menuItem.getBoundingClientRect() const tooltipRect = tooltipRef.current.getBoundingClientRect() const left = itemRect.left - menuRect.left + (itemRect.width - tooltipRect.width) / 2 setTooltipPosition({ left: Math.max(0, Math.min(left, menuRect.width - tooltipRect.width)), width: tooltipRect.width }) } }, [activeIndex]) return (

{activeIndex !== null && (

{items[activeIndex].label}

)}

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

) }