b2b-marketing-assistant/components/ExportMenu.tsx hinzugefügt

b2b-marketing-assistant/components/ExportMenu.tsx

@@ -0,0 +1,63 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { DownloadIcon, PrintIcon, MarkdownIcon, ChevronDownIcon } from './Icons';
+import { translations } from '../constants';
+
+interface ExportMenuProps {
+    onDownloadMarkdown: () => void;
+    onPrint: () => void;
+    t: typeof translations.de;
+}
+
+export const ExportMenu: React.FC<ExportMenuProps> = ({ onDownloadMarkdown, onPrint, t }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <div className="relative print:hidden" ref={menuRef}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center justify-center px-4 py-2 border border-slate-300 dark:border-slate-600 text-sm font-medium rounded-md shadow-sm text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
+                aria-haspopup="true"
+                aria-expanded={isOpen}
+            >
+                <DownloadIcon className="mr-2 h-5 w-5" />
+                {t.exportButton}
+                <ChevronDownIcon className={`ml-2 h-4 w-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+            </button>
+            {isOpen && (
+                <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-800 ring-1 ring-black dark:ring-slate-700 ring-opacity-5 focus:outline-none z-10">
+                    <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+                        <button
+                            onClick={() => { onDownloadMarkdown(); setIsOpen(false); }}
+                            className="w-full text-left flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
+                            role="menuitem"
+                        >
+                            <MarkdownIcon className="mr-3 h-5 w-5 text-slate-500" />
+                            {t.exportAsMarkdown}
+                        </button>
+                        <button
+                            onClick={() => { onPrint(); setIsOpen(false); }}
+                            className="w-full text-left flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700"
+                            role="menuitem"
+                        >
+                            <PrintIcon className="mr-3 h-5 w-5 text-slate-500" />
+                            {t.exportAsPdf}
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};