n8n anonyme

app/components/MarkdownModal.tsx

@@ -0,0 +1,42 @@
+// 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>
+  );
+}