From cb2c17ce2bb09e70346df3d96316fff2bad94362 Mon Sep 17 00:00:00 2001
From: nBiqoz <nacim@biqoz.com>
Date: Mon, 28 Jul 2025 22:52:46 +0200
Subject: [PATCH] presidio ok v.1 button

---
 app/components/FileUploadComponent.tsx | 84 ++++++++++++++------------
 1 file changed, 46 insertions(+), 38 deletions(-)

diff --git a/app/components/FileUploadComponent.tsx b/app/components/FileUploadComponent.tsx
index 5269179..eeec160 100644
--- a/app/components/FileUploadComponent.tsx
+++ b/app/components/FileUploadComponent.tsx
@@ -85,9 +85,7 @@ export const FileUploadComponent = ({
                 <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
                 <p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
                   Cet outil IA peut ne pas détecter toutes les informations
-                  sensibles.
-                  <br />
-                  Vérifiez le résultat avant de le partager.
+                  sensibles. Vérifiez le résultat avant de le partager.
                 </p>
               </div>
             </div>
@@ -173,44 +171,54 @@ export const FileUploadComponent = ({
   return (
     <div className="w-full flex flex-col space-y-5">
       {/* Drop Zone - Responsive */}
-      <label className="flex flex-col items-center justify-center cursor-pointer group transition-all duration-300 border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] 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="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>
+
+          {/* 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>
 
-        {/* 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époser 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>
+        {/* 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"
+          />
         </div>
-
-        {/* Hidden Input */}
-        <input
-          type="file"
-          onChange={handleFileChange}
-          accept=".txt,.pdf"
-          className="hidden"
-        />
-      </label>
-
-      {/* Bouton d'exemple repositionné juste en dessous */}
-      <div className="flex justify-center">
-        <SampleTextComponent
-          setSourceText={setSourceText}
-          setFileContent={setFileContent}
-          setUploadedFile={setUploadedFile}
-          variant="button"
-        />
       </div>
 
       {/* Supported Data Types */}