version nice

app/components/ProgressBar.tsx

@@ -0,0 +1,92 @@
+import { Check, Upload, Eye, Shield } from "lucide-react";
+
+interface ProgressBarProps {
+  currentStep: number;
+  steps: string[];
+}
+
+export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
+  // Icônes pour chaque étape
+  const getStepIcon = (stepNumber: number, isCompleted: boolean) => {
+    if (isCompleted) {
+      return <Check className="h-3 w-3" />;
+    }
+
+    switch (stepNumber) {
+      case 1:
+        return <Upload className="h-3 w-3" />;
+      case 2:
+        return <Eye className="h-3 w-3" />;
+      case 3:
+        return <Shield className="h-3 w-3" />;
+      default:
+        return stepNumber;
+    }
+  };
+
+  return (
+    <div className="w-full max-w-2xl mx-auto mb-4 px-2">
+      <div className="flex items-center justify-center">
+        <div className="flex items-center justify-between w-full max-w-xs sm:max-w-md">
+          {steps.map((step, index) => {
+            const stepNumber = index + 1;
+            const isCompleted = stepNumber < currentStep;
+            const isCurrent = stepNumber === currentStep;
+
+            return (
+              <div key={index} className="flex items-center">
+                {/* Step Circle */}
+                <div className="flex flex-col items-center">
+                  <div
+                    className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center font-medium text-xs transition-all duration-300 ${
+                      isCompleted
+                        ? "bg-[#f7ab6e] text-white"
+                        : isCurrent
+                        ? "bg-[#f7ab6e] text-white ring-2 ring-[#f7ab6e] ring-opacity-20"
+                        : "bg-gray-200 text-gray-500"
+                    }`}
+                  >
+                    {getStepIcon(stepNumber, isCompleted)}
+                  </div>
+                  <span
+                    className={`mt-1 text-[8px] sm:text-[10px] font-medium text-center max-w-[60px] sm:max-w-none leading-tight ${
+                      isCompleted || isCurrent
+                        ? "text-[#092727]"
+                        : "text-gray-500"
+                    }`}
+                    style={{
+                      wordBreak: 'break-word',
+                      hyphens: 'auto'
+                    }}
+                  >
+                    {step === "Anonymisation" ? (
+                      <>
+                        <span className="hidden sm:inline">Anonymisation</span>
+                        <span className="sm:hidden">Anonym.</span>
+                      </>
+                    ) : (
+                      step
+                    )}
+                  </span>
+                </div>
+
+                {/* Connector Line */}
+                {index < steps.length - 1 && (
+                  <div className="flex-1 mx-2 sm:mx-4">
+                    <div
+                      className={`h-0.5 w-6 sm:w-12 transition-all duration-300 ${
+                        stepNumber < currentStep
+                          ? "bg-[#f7ab6e]"
+                          : "bg-gray-200"
+                      }`}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};