47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client'
|
||
|
||
const STEPS = [
|
||
{ id: 1, label: 'Analyse Sheets' },
|
||
{ id: 2, label: 'Aperçu diff' },
|
||
{ id: 3, label: 'Confirmation' },
|
||
{ id: 4, label: 'Synchronisation' },
|
||
]
|
||
|
||
interface SyncStepperProps {
|
||
currentStep: number // 1–4
|
||
}
|
||
|
||
export function SyncStepper({ currentStep }: SyncStepperProps) {
|
||
return (
|
||
<div className="flex items-center gap-0">
|
||
{STEPS.map((step, i) => {
|
||
const done = currentStep > step.id
|
||
const active = currentStep === step.id
|
||
return (
|
||
<div key={step.id} className="flex items-center">
|
||
{i > 0 && (
|
||
<div className={`h-0.5 w-12 ${done ? 'bg-indigo-500' : 'bg-slate-700'}`} />
|
||
)}
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div
|
||
className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-colors ${
|
||
done
|
||
? 'bg-indigo-500 text-white'
|
||
: active
|
||
? 'bg-indigo-600 text-white ring-2 ring-indigo-400'
|
||
: 'bg-slate-800 text-slate-500 border border-slate-700'
|
||
}`}
|
||
>
|
||
{done ? '✓' : step.id}
|
||
</div>
|
||
<span className={`text-xs ${active ? 'text-slate-200 font-semibold' : 'text-slate-500'}`}>
|
||
{step.label}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
}
|