1 files changed, 57 insertions, 0 deletions
diff --git a/src/components/toolbar/ToolbarItem.tsx b/src/components/toolbar/ToolbarItem.tsx
new file mode 100644
index 0000000..76bd615
--- /dev/null
+++ b/src/components/toolbar/ToolbarItem.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+export interface ToolbarItemProps {
+    children: React.ReactNode;
+    renderContent?: (onClose: () => void) => React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+
+export const ToolbarItem: React.FC<ToolbarItemProps> = ({
+    children,
+    renderContent,
+    onClick,
+    disabled = false,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFading, setIsFading] = useState(false);
+
+    const handleClose = () => {
+        setIsFading(true);
+        setTimeout(() => {
+            setIsOpen(false);
+            setIsFading(false);
+        }, 200);
+    };
+
+    const handleToggle = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (disabled) return;
+
+        if (renderContent) {
+            if (isOpen) {
+                handleClose();
+            } else {
+                setIsOpen(true);
+            }
+        }
+
+        onClick?.();
+    };
+
+    return (
+        <div className={`toolbar-item ${disabled ? 'disabled' : ''}`} onClick={handleToggle}>
+            <div className='toolbar-item-content'>
+                {children}
+            </div>
+            {renderContent && isOpen && !disabled && (
+                <div
+                    className={`toolbar-item-content-panel ${isFading ? 'fading' : ''}`}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    {renderContent(handleClose)}
+                </div>
+            )}
+        </div>
+    );
+};