From 85288890ccad8d31f6b0e21d8f522fcb672689cd Mon Sep 17 00:00:00 2001
From: nBiqoz <nacim@biqoz.com>
Date: Tue, 29 Jul 2025 10:41:21 +0200
Subject: [PATCH] side by side txte exemple

---
 app/components/FileUploadComponent.tsx | 181 ++++++++++++++++++-------
 app/components/SampleTextComponent.tsx |  25 ++--
 app/page.tsx                           |   4 +
 3 files changed, 153 insertions(+), 57 deletions(-)

diff --git a/app/components/FileUploadComponent.tsx b/app/components/FileUploadComponent.tsx
index 0474d8e..ade4979 100644
--- a/app/components/FileUploadComponent.tsx
+++ b/app/components/FileUploadComponent.tsx
@@ -26,6 +26,8 @@ interface FileUploadComponentProps {
   outputText?: string;
   copyToClipboard?: () => void;
   downloadText?: () => void;
+  isExampleLoaded?: boolean; // NOUVEAU
+  setIsExampleLoaded?: (loaded: boolean) => void; // NOUVEAU
 }
 
 export const FileUploadComponent = ({
@@ -43,9 +45,13 @@ export const FileUploadComponent = ({
   outputText,
   copyToClipboard,
   downloadText,
+  setIsExampleLoaded, // NOUVEAU - Ajouté ici
 }: FileUploadComponentProps) => {
-  // Si un fichier est uploadé ou qu'il y a du texte d'exemple, on affiche le preview
-  if (uploadedFile || (sourceText && sourceText.trim())) {
+  // On passe en preview seulement si :
+  // 1. Un fichier est uploadé OU
+  // 2. On a un résultat d'anonymisation
+  // (On retire isExampleLoaded pour permettre l'édition du texte d'exemple)
+  if (uploadedFile || outputText) {
     return (
       <div className="w-full flex flex-col space-y-6">
         {/* Si on a un résultat, afficher 2 blocs côte à côte */}
@@ -269,55 +275,134 @@ export const FileUploadComponent = ({
 
   // Si pas de fichier ni de texte, on affiche la zone de drop
   return (
-    <div className="w-full flex flex-col space-y-5">
-      {/* Drop Zone - Responsive */}
-      <div className="border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] transition-all duration-300">
-        {/* Zone cliquable pour le glisser-déposer */}
-        <label className="flex flex-col items-center justify-center cursor-pointer group p-6 sm:p-8">
-          {/* Upload Icon */}
-          <div className="w-12 h-12 sm:w-16 sm:h-16 bg-[#f7ab6e] group-hover:bg-[#f7ab6e]/75 rounded-full flex items-center justify-center mb-4 transition-colors duration-300">
-            <Upload className="h-6 w-6 sm:h-8 sm:w-8 text-white transition-colors duration-300" />
+    <div className="w-full flex flex-col space-y-3">
+      {/* Deux colonnes côte à côte */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Colonne gauche - Zone de texte */}
+        <div className="border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] transition-all duration-300">
+          <div className="p-3 sm:p-4">
+            {/* Header avec icône */}
+            <div className="flex items-center justify-center mb-2">
+              <div className="w-8 h-8 bg-[#f7ab6e] rounded-full flex items-center justify-center">
+                <FileText className="h-4 w-4 text-white" />
+              </div>
+            </div>
+
+            {/* Titre */}
+            <h3 className="text-sm font-semibold text-[#092727] mb-1 text-center">
+              Saisissez votre texte
+            </h3>
+            <p className="text-xs text-[#092727] opacity-80 mb-2 text-center">
+              Tapez ou collez votre texte ici
+            </p>
+
+            {/* Zone de texte éditable */}
+            <div className="relative border-2 border-gray-200 rounded-lg bg-white focus-within:border-[#f7ab6e] focus-within:ring-1 focus-within:ring-[#f7ab6e]/20 transition-all duration-300">
+              {/* Zone pour le texte - SANS overflow */}
+              <div className="h-40 p-2 relative">
+                {/* Placeholder personnalisé avec lien cliquable */}
+                {!sourceText && (
+                  <div className="absolute inset-2 text-gray-400 text-xs leading-relaxed pointer-events-none">
+                    <span>Commencez à taper du texte, ou&nbsp;</span>
+                    <SampleTextComponent
+                      setSourceText={setSourceText}
+                      setFileContent={setFileContent}
+                      setUploadedFile={setUploadedFile}
+                      setIsExampleLoaded={setIsExampleLoaded}
+                      variant="link"
+                    />
+                  </div>
+                )}
+
+                <textarea
+                  value={sourceText}
+                  onChange={(e) => setSourceText(e.target.value)}
+                  placeholder="" // Placeholder vide car on utilise le custom
+                  className="w-full h-full border-none outline-none resize-none text-[#092727] text-xs leading-relaxed bg-transparent overflow-y-auto"
+                  style={{
+                    fontFamily:
+                      'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+                  }}
+                />
+              </div>
+
+              {/* Barre du bas avec compteur et bouton */}
+              <div className="flex items-center justify-between p-2 border-t border-gray-200 bg-gray-50">
+                {/* Indicateur de caractères */}
+                <div className="text-gray-400 text-xs">
+                  {sourceText.length} caractères
+                </div>
+
+                {/* Bouton Anonymiser */}
+                <button
+                  onClick={onAnonymize}
+                  disabled={isProcessing || !sourceText.trim()}
+                  className="bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg text-xs font-medium transition-colors duration-300 flex items-center space-x-2 shadow-sm"
+                  title={
+                    sourceText.trim()
+                      ? "Anonymiser les données"
+                      : "Saisissez du texte pour anonymiser"
+                  }
+                >
+                  {isProcessing ? (
+                    <>
+                      <div className="animate-spin rounded-full h-3 w-3 border-b border-white"></div>
+                      <span>Traitement...</span>
+                    </>
+                  ) : (
+                    <>
+                      <svg
+                        className="w-3 h-3"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                        />
+                      </svg>
+                      <span>Anonymisez les données</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
           </div>
-
-          {/* Main Text */}
-          <h3 className="text-base sm:text-lg font-semibold text-[#092727] mb-2 group-hover:text-[#0a3030] transition-colors duration-300 text-center">
-            Déposez votre fichier ici
-          </h3>
-          <p className="text-sm sm:text-base text-[#092727] opacity-80 mb-4 text-center group-hover:opacity-90 transition-opacity duration-300">
-            ou cliquez pour sélectionner un fichier
-          </p>
-
-          {/* File Info */}
-          <div className="flex flex-col sm:flex-row items-center gap-2 text-xs sm:text-sm text-[#092727] opacity-70">
-            <span>📄 Fichiers TXT, PDF</span>
-            <span className="hidden sm:inline">•</span>
-            <span>Max 5MB</span>
-          </div>
-
-          {/* Hidden Input */}
-          <input
-            type="file"
-            onChange={handleFileChange}
-            accept=".txt,.pdf"
-            className="hidden"
-          />
-        </label>
-
-        {/* Démarcation avec trait horizontal - NON CLIQUABLE */}
-        <div className="w-full flex items-center px-6 sm:px-8 py-4">
-          <div className="flex-1 h-px bg-[#092727] opacity-30"></div>
-          <span className="px-3 text-xs text-[#092727] opacity-60">ou</span>
-          <div className="flex-1 h-px bg-[#092727] opacity-30"></div>
         </div>
 
-        {/* Bouton d'exemple - NON CLIQUABLE pour le drag & drop */}
-        <div className="flex justify-center pb-6 sm:pb-8">
-          <SampleTextComponent
-            setSourceText={setSourceText}
-            setFileContent={setFileContent}
-            setUploadedFile={setUploadedFile}
-            variant="button"
-          />
+        {/* Colonne droite - Zone upload */}
+        <div className="border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] transition-all duration-300">
+          <label className="flex flex-col items-center justify-center cursor-pointer group p-3 sm:p-4 h-full min-h-[200px]">
+            {/* Upload Icon */}
+            <div className="w-10 h-10 bg-[#092727] group-hover:bg-[#0a3030] rounded-full flex items-center justify-center mb-3 transition-colors duration-300">
+              <Upload className="h-5 w-5 text-white" />
+            </div>
+
+            {/* Titre */}
+            <h3 className="text-sm font-semibold text-[#092727] mb-1 group-hover:text-[#0a3030] transition-colors duration-300 text-center">
+              Déposez votre fichier ici
+            </h3>
+            <p className="text-xs text-[#092727] opacity-80 mb-3 text-center group-hover:opacity-90 transition-opacity duration-300">
+              ou cliquez pour sélectionner
+            </p>
+
+            {/* File Info */}
+            <div className="flex flex-col items-center gap-1 text-xs text-[#092727] opacity-60">
+              <span>📄 Fichiers TXT, PDF</span>
+              <span>Max 5MB</span>
+            </div>
+
+            {/* Hidden Input */}
+            <input
+              type="file"
+              onChange={handleFileChange}
+              accept=".txt,.pdf"
+              className="hidden"
+            />
+          </label>
         </div>
       </div>
 
diff --git a/app/components/SampleTextComponent.tsx b/app/components/SampleTextComponent.tsx
index 7a854ae..136318a 100644
--- a/app/components/SampleTextComponent.tsx
+++ b/app/components/SampleTextComponent.tsx
@@ -2,13 +2,16 @@ interface SampleTextComponentProps {
   setSourceText: (text: string) => void;
   setFileContent: (content: string) => void;
   setUploadedFile: (file: File | null) => void;
-  variant?: "default" | "button"; // Ajouter une variante
+  setIsExampleLoaded?: (loaded: boolean) => void;
+  variant?: "button" | "link"; // Nouvelle prop
 }
 
 export const SampleTextComponent = ({
   setSourceText,
   setFileContent,
   setUploadedFile,
+  setIsExampleLoaded,
+  variant = "button",
 }: SampleTextComponentProps) => {
   const loadSampleText = () => {
     const sampleText = `Date : 15 mars 2025
@@ -31,16 +34,20 @@ TVA intracommunautaire : BE0987.654.321`;
     setSourceText(sampleText);
     setFileContent(sampleText);
     setUploadedFile(null);
+    if (setIsExampleLoaded) {
+      setIsExampleLoaded(true); // NOUVEAU - Marquer qu'un exemple est chargé
+    }
   };
 
-  return (
-    <>
-      <button
+  if (variant === "link") {
+    return (
+      <span
         onClick={loadSampleText}
-        className="bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 cursor-pointer text-white px-6 py-3 rounded-lg text-sm font-medium transition-colors duration-300"
+        className="text-[#f7ab6e] hover:text-[#f7ab6e]/80 underline pointer-events-auto transition-colors duration-200 cursor-pointer"
+        title="Cliquez pour charger un exemple de texte"
       >
-        Essayez avec un texte d&apos;exemple
-      </button>
-    </>
-  );
+        générez un texte d&apos;exemple
+      </span>
+    );
+  }
 };
diff --git a/app/page.tsx b/app/page.tsx
index b301188..60b070d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -25,6 +25,7 @@ export default function Home() {
   const [error, setError] = useState<string | null>(null);
   const [isLoadingFile, setIsLoadingFile] = useState(false);
   const [entityMappings, setEntityMappings] = useState<EntityMapping[]>([]);
+  const [isExampleLoaded, setIsExampleLoaded] = useState(false); // NOUVEAU
 
   const progressSteps = ["Téléversement", "Prévisualisation", "Anonymisation"];
 
@@ -43,6 +44,7 @@ export default function Home() {
     setError(null);
     setIsLoadingFile(false);
     setEntityMappings([]);
+    setIsExampleLoaded(false); // NOUVEAU
   };
 
   // Hooks personnalisés pour la logique métier
@@ -105,6 +107,8 @@ export default function Home() {
               outputText={outputText}
               copyToClipboard={copyToClipboard}
               downloadText={downloadText}
+              isExampleLoaded={isExampleLoaded} // NOUVEAU
+              setIsExampleLoaded={setIsExampleLoaded} // NOUVEAU
             />
           </div>
         </div>