File size: 3,545 Bytes
1f7ead8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import React from 'react';
import { X, Download, Copy, Check } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
const ReportViewerModal = ({ isOpen, onClose, data }) => {
const [copied, setCopied] = React.useState(false);
if (!isOpen || !data) return null;
const handleCopy = () => {
navigator.clipboard.writeText(data.markdown);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const handleDownload = () => {
const blob = new Blob([data.markdown], { type: 'text/markdown' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${data.title.replace(/\s+/g, '_').toLowerCase()}.md`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
};
return (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-[#1f1f1f] rounded-2xl w-full max-w-4xl h-[90vh] flex flex-col shadow-2xl border border-white/10 overflow-hidden">
{/* Header */}
<div className="p-6 border-b border-white/10 flex justify-between items-center bg-[#1f1f1f]">
<div>
<h2 className="text-2xl font-semibold text-white mb-1">{data.title}</h2>
<p className="text-gray-400 text-sm">Generated by Vertical.ai</p>
</div>
<div className="flex gap-3">
<button
onClick={handleCopy}
className="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-300 rounded-lg transition-colors border border-white/10 font-medium"
>
{copied ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
{copied ? 'Copied' : 'Copy'}
</button>
<button
onClick={handleDownload}
className="flex items-center gap-2 px-4 py-2 bg-purple-600/20 hover:bg-purple-600/30 text-purple-300 rounded-lg transition-colors border border-purple-500/30 font-medium"
>
<Download className="w-4 h-4" />
Download MD
</button>
<button
onClick={onClose}
className="p-2 hover:bg-white/10 rounded-full transition-colors text-gray-400 hover:text-white"
>
<X className="w-6 h-6" />
</button>
</div>
</div>
{/* Content - Scrollable */}
<div className="flex-1 overflow-auto p-8 bg-[#121212] prose prose-invert max-w-none">
<ReactMarkdown
remarkPlugins={[remarkMath]}
rehypePlugins={[rehypeKatex]}
>
{data.markdown}
</ReactMarkdown>
</div>
</div>
</div>
);
};
export default ReportViewerModal;
|