"use client" import * as React from "react" import { AnimatePresence, motion, MotionConfig } from "framer-motion" import useMeasure from "react-use-measure" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" const transition = { type: "spring", bounce: 0.1, duration: 0.25, } export interface ToolbarItem { id: number label: string icon: React.ReactNode content: React.ReactNode } interface ToolbarProps { items: ToolbarItem[] } export function Toolbar({ items }: ToolbarProps) { const [active, setActive] = React.useState(null) const [contentRef, { height: contentHeight }] = useMeasure() const [menuRef, { width: containerWidth }] = useMeasure() const [isOpen, setIsOpen] = React.useState(false) const [maxWidth, setMaxWidth] = React.useState(0) const toolbarRef = React.useRef(null) React.useEffect(() => { if (!containerWidth || maxWidth > 0) return setMaxWidth(containerWidth) }, [containerWidth, maxWidth]) React.useEffect(() => { function handleClickOutside(event: MouseEvent) { if (toolbarRef.current && !toolbarRef.current.contains(event.target as Node)) { setIsOpen(false) setActive(null) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) return (

{isOpen && (

{items.map((item) => (

{item.content}

))}

)}

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

) }