93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
};
|