interface WizardProgressProps {
currentStep: number;
totalSteps: number;
}
export default function WizardProgress({ currentStep, totalSteps }: WizardProgressProps) {
const steps = Array.from({ length: totalSteps }, (_, i) => i + 1);
return (
<div className="flex items-center justify-center w-full">
{steps.map((step) => {
const isCompleted = step < currentStep;
const isCurrent = step === currentStep;
return (
<div key={step} className="flex items-center">
{/* Step circle */}
<div
className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
isCompleted
? 'bg-[var(--color-accent)] text-white'
: isCurrent
? 'border-2 border-[var(--color-accent)] text-[var(--color-accent)]'
: 'bg-gray-200 text-gray-500'
}`}
>
{isCompleted ? (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
) : (
step
)}
</div>
{/* Connector line */}
{step < totalSteps && (
<div
className={`w-12 h-0.5 ${
step < currentStep ? 'bg-[var(--color-accent)]' : 'bg-gray-200'
}`}
/>
)}
</div>
);
})}
</div>
);
}