92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import { Check, Upload, Eye, Shield } from "lucide-react";
|
|
import React from "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-start justify-center">
|
|
<div className="flex items-start w-full max-w-md">
|
|
{steps.map((step, index) => {
|
|
const stepNumber = index + 1;
|
|
const isCompleted = stepNumber < currentStep;
|
|
const isCurrent = stepNumber === currentStep;
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
{/* Step Circle and Label */}
|
|
<div
|
|
className="flex flex-col items-center text-center"
|
|
style={{ flex: "0 0 auto" }}
|
|
>
|
|
<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-sm font-medium leading-tight ${
|
|
isCompleted || isCurrent
|
|
? "text-[#092727]"
|
|
: "text-gray-500"
|
|
}`}
|
|
style={{
|
|
wordBreak: "break-word",
|
|
hyphens: "auto",
|
|
minWidth: "60px", // Assure un espace minimum
|
|
maxWidth: "120px", // Empêche de devenir trop large
|
|
}}
|
|
>
|
|
{step}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Connector Line */}
|
|
{index < steps.length - 1 && (
|
|
<div className="flex-1 flex items-center justify-center px-1 sm:px-2 mt-2.5 sm:mt-3">
|
|
<div
|
|
className={`h-0.5 w-full transition-all duration-300 ${
|
|
stepNumber < currentStep
|
|
? "bg-[#f7ab6e]"
|
|
: "bg-gray-200"
|
|
}`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|