43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
// components/MarkdownModal.tsx
|
|
|
|
import { X } from "lucide-react";
|
|
|
|
interface HtmlModalProps {
|
|
content: string | null;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function MarkdownModal({ content, onClose }: HtmlModalProps) {
|
|
if (!content) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-4"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="bg-[#061717] border-4 border-white shadow-[10px_10px_0_0_black] w-full max-w-3xl h-[80vh] flex flex-col relative"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<header className="flex items-center justify-between p-4 border-b-4 border-white">
|
|
<h3 className="text-lg font-black text-white uppercase">
|
|
Aperçu du Document
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 bg-[#F7AB6E] text-white border-2 border-white shadow-[3px_3px_0_0_black] hover:shadow-[1px_1px_0_0_black] active:shadow-none active:translate-x-0.5 active:translate-y-0.5"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</header>
|
|
|
|
{/* Ce conteneur stylise le HTML propre qu'il reçoit */}
|
|
<div
|
|
className="preview-content p-6 overflow-y-auto w-full h-full"
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|