62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
interface Step {
|
|
label: string;
|
|
isCompleted: boolean;
|
|
isCurrent: boolean;
|
|
}
|
|
|
|
interface StepIndicatorProps {
|
|
steps: Step[];
|
|
}
|
|
|
|
export default function StepIndicator({ steps }: StepIndicatorProps) {
|
|
return (
|
|
<div className="flex items-center gap-0 w-full max-w-2xl">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="flex items-center flex-1 last:flex-none">
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
className={`flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-all duration-200 ${
|
|
step.isCompleted
|
|
? 'bg-indigo-600 text-white shadow-sm shadow-indigo-500/30'
|
|
: step.isCurrent
|
|
? 'bg-indigo-100 dark:bg-indigo-500/15 text-indigo-700 dark:text-indigo-400 ring-2 ring-indigo-600 dark:ring-indigo-400'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
|
|
}`}
|
|
>
|
|
{step.isCompleted ? (
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
</svg>
|
|
) : (
|
|
index + 1
|
|
)}
|
|
</div>
|
|
<span
|
|
className={`mt-1.5 text-xs font-medium whitespace-nowrap ${
|
|
step.isCurrent
|
|
? 'text-indigo-700 dark:text-indigo-400'
|
|
: step.isCompleted
|
|
? 'text-gray-600 dark:text-gray-300'
|
|
: 'text-gray-400 dark:text-gray-500'
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</span>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div
|
|
className={`flex-1 h-0.5 mx-2 mb-5 rounded-full transition-colors ${
|
|
step.isCompleted
|
|
? 'bg-indigo-600'
|
|
: 'bg-gray-200 dark:bg-gray-800'
|
|
}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|