"use client" import React, { useState, useRef, useEffect } from "react" import { ChevronDown } from "lucide-react" interface MenuProps { trigger: React.ReactNode children: React.ReactNode align?: "left" | "right" showChevron?: boolean } export function Menu({ trigger, children, align = "left", showChevron = true }: MenuProps) { const [isOpen, setIsOpen] = useState(false) return (

setIsOpen(!isOpen)} className="cursor-pointer inline-flex items-center" role="button" aria-haspopup="true" aria-expanded={isOpen} > {trigger} {showChevron && (

{isOpen && ( )}

) } interface MenuItemProps { children?: React.ReactNode onClick?: () => void disabled?: boolean icon?: React.ReactNode isActive?: boolean } export function MenuItem({ children, onClick, disabled = false, icon, isActive = false }: MenuItemProps) { return ( ) } export function MenuContainer({ children }: { children: React.ReactNode }) { const [isExpanded, setIsExpanded] = useState(false) const childrenArray = React.Children.toArray(children) const totalItems = childrenArray.length const handleToggle = () => { if (isExpanded) { setIsExpanded(false) } else { setIsExpanded(true) } } return (

{/* Container for all items */}

{/* First item - always visible */}

{childrenArray[0]}

{/* Other items */} {childrenArray.slice(1).map((child, index) => (

{child}

))}

) }