64 lines
3.1 KiB
TypeScript
64 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
};
|