Spaces:
Sleeping
Sleeping
| import { Download, FileJson, FileText, FileSpreadsheet, ChevronDown } from 'lucide-react'; | |
| import { useState, useRef, useEffect } from 'react'; | |
| interface ExportButtonProps { | |
| onExport: (format: 'html' | 'json' | 'csv') => Promise<void>; | |
| } | |
| export function ExportButton({ onExport }: ExportButtonProps) { | |
| const [open, setOpen] = useState(false); | |
| const [exporting, setExporting] = useState<string | null>(null); | |
| const ref = useRef<HTMLDivElement>(null); | |
| useEffect(() => { | |
| const handler = (e: MouseEvent) => { | |
| if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); | |
| }; | |
| document.addEventListener('mousedown', handler); | |
| return () => document.removeEventListener('mousedown', handler); | |
| }, []); | |
| const handleExport = async (format: 'html' | 'json' | 'csv') => { | |
| setOpen(false); | |
| setExporting(format); | |
| try { | |
| await onExport(format); | |
| } finally { | |
| setExporting(null); | |
| } | |
| }; | |
| const options = [ | |
| { key: 'html' as const, label: 'HTML Report', desc: 'Self-contained, shareable', icon: <FileText className="w-4 h-4" /> }, | |
| { key: 'json' as const, label: 'JSON Export', desc: 'Full structured data', icon: <FileJson className="w-4 h-4" /> }, | |
| { key: 'csv' as const, label: 'CSV Summary', desc: 'Spreadsheet-friendly', icon: <FileSpreadsheet className="w-4 h-4" /> }, | |
| ]; | |
| return ( | |
| <div className="relative" ref={ref}> | |
| <button | |
| id="export-button" | |
| onClick={() => setOpen(o => !o)} | |
| disabled={!!exporting} | |
| className="btn-secondary gap-1.5" | |
| > | |
| <Download className="w-4 h-4" /> | |
| {exporting ? `Exporting ${exporting}…` : 'Export'} | |
| <ChevronDown className={`w-3 h-3 transition-transform ${open ? 'rotate-180' : ''}`} /> | |
| </button> | |
| {open && ( | |
| <div className="absolute right-0 mt-2 w-52 card shadow-xl z-40 overflow-hidden animate-fade-in"> | |
| {options.map(opt => ( | |
| <button | |
| key={opt.key} | |
| id={`export-${opt.key}`} | |
| onClick={() => handleExport(opt.key)} | |
| className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-white/5 transition-colors border-b border-white/[0.05] last:border-0" | |
| > | |
| <span className="text-blue-400">{opt.icon}</span> | |
| <div> | |
| <p className="text-sm font-medium text-gray-200">{opt.label}</p> | |
| <p className="text-xs text-gray-500">{opt.desc}</p> | |
| </div> | |
| </button> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |