File size: 4,818 Bytes
68c2137 | 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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | import React from 'react';
import { X, Download, FileText, Scale } from 'lucide-react';
import type { Message } from '../types/chat';
interface PDFPreviewModalProps {
isOpen: boolean;
onClose: () => void;
pdfData?: Message['pdfPreview'];
}
export const PDFPreviewModal: React.FC<PDFPreviewModalProps> = ({
isOpen,
onClose,
pdfData
}) => {
if (!isOpen || !pdfData) return null;
const handlePrintDownload = () => {
window.print();
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-fade-in">
<div className="w-full max-w-3xl glass-panel rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]">
{/* Header Toolbar */}
<div className="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50 dark:bg-darkbg-800">
<div className="flex items-center space-x-3">
<div className="p-2 rounded-xl bg-brand-500 text-white shadow-sm">
<FileText className="w-5 h-5" />
</div>
<div>
<h3 className="text-sm font-bold text-slate-900 dark:text-white">{pdfData.title}</h3>
<p className="text-[11px] text-slate-500 dark:text-slate-400">Formal Legal PDF Document Preview</p>
</div>
</div>
<div className="flex items-center space-x-2">
<button
onClick={handlePrintDownload}
className="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-xs font-semibold shadow-md transition-all"
>
<Download className="w-4 h-4" />
<span>Export PDF / Print</span>
</button>
<button
onClick={onClose}
className="p-1.5 rounded-xl text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
>
<X className="w-5 h-5" />
</button>
</div>
</div>
{/* PDF Document Paper Body */}
<div className="p-8 overflow-y-auto bg-slate-200 dark:bg-slate-950 flex justify-center">
<div className="w-full max-w-2xl bg-white text-slate-900 p-8 sm:p-12 shadow-2xl rounded-sm font-serif text-sm leading-relaxed border border-slate-300">
{/* Formal Legal Header */}
<div className="text-center border-b border-slate-900 pb-6 mb-6">
<div className="flex items-center justify-center space-x-2 mb-2">
<Scale className="w-6 h-6 text-slate-900" />
<h1 className="font-bold text-xl tracking-wider uppercase">LEGAL FORMAL NOTICE & REPORT</h1>
</div>
<p className="text-xs uppercase tracking-widest text-slate-600">Generated by LawSLM AI Assistant (Developer: Amit Kumar)</p>
<p className="text-[11px] text-slate-500 mt-1">Date: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
</div>
{/* Title & Summary */}
<div className="mb-6">
<h2 className="text-lg font-bold uppercase underline mb-2 text-slate-900">{pdfData.title}</h2>
<p className="text-xs italic text-slate-700 font-sans bg-slate-100 p-3 rounded border border-slate-200">
{pdfData.summary}
</p>
</div>
{/* Document Sections */}
<div className="space-y-6">
{pdfData.sections.map((sec, idx) => (
<div key={idx} className="space-y-2">
<h3 className="text-sm font-bold uppercase tracking-wide text-slate-900">
{idx + 1}. {sec.heading}
</h3>
<p className="text-xs text-slate-800 leading-relaxed text-justify">
{sec.body}
</p>
</div>
))}
</div>
{/* Signature & Seal Block */}
<div className="mt-12 pt-8 border-t border-slate-300 flex justify-between items-end text-xs">
<div>
<p className="font-bold uppercase">Prepared By:</p>
<p className="text-slate-700 font-sans">LawSLM Automated Pipeline</p>
<p className="text-[10px] text-slate-500 font-sans">Developer: Amit Kumar</p>
</div>
<div className="text-right">
<div className="w-32 border-b border-slate-800 mb-1" />
<p className="font-bold uppercase">Authorized Signatory</p>
<p className="text-[10px] text-slate-500 font-sans">Legal & Tech Review</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
|