version nice

app/components/ResultPreviewComponent.tsx

@@ -0,0 +1,67 @@
+import { Copy, Download, AlertTriangle } from "lucide-react";
+import { ReactNode } from "react";
+
+interface ResultPreviewComponentProps {
+  outputText: string;
+  copyToClipboard: () => void;
+  downloadText: () => void;
+  highlightEntities: (text: string) => ReactNode;
+}
+
+export const ResultPreviewComponent = ({
+  outputText,
+  copyToClipboard,
+  downloadText,
+  highlightEntities,
+}: ResultPreviewComponentProps) => {
+  if (!outputText) return null;
+
+  return (
+    <div className="mt-8 space-y-4">
+      <div className="flex items-center justify-between border-b border-[#f7ab6e] border-opacity-30 pb-2">
+        <h3 className="text-lg font-medium text-[#092727]">
+          Document anonymisé
+        </h3>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={copyToClipboard}
+            disabled={!outputText}
+            className="p-2 text-[#092727] hover:text-[#f7ab6e] disabled:opacity-50"
+            title="Copier"
+          >
+            <Copy className="h-4 w-4" />
+          </button>
+
+          <button
+            onClick={downloadText}
+            disabled={!outputText}
+            className="p-2 text-[#092727] hover:text-[#f7ab6e] disabled:opacity-50"
+            title="Télécharger"
+          >
+            <Download className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="border border-[#f7ab6e] border-opacity-30 rounded-lg bg-white min-h-[400px] flex flex-col">
+        <div className="flex-1 p-4 overflow-hidden">
+          <div className="h-full min-h-[300px] text-[#092727] whitespace-pre-wrap overflow-y-auto">
+            <div className="leading-relaxed">
+              {highlightEntities(outputText)}
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 border-t border-[#f7ab6e] border-opacity-30">
+          <div className="flex items-start gap-2 p-2 bg-[#f7ab6e] bg-opacity-10 rounded-md">
+            <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
+            <p className="text-sm text-[#092727]">
+              Vérifiez le résultat pour vous assurer que toutes les informations
+              privées sont supprimées et éviter une divulgation accidentelle.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};