65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { User, Camera, Check } from 'lucide-react';
|
|
|
|
interface Step {
|
|
id: number;
|
|
label: string;
|
|
icon: React.ElementType;
|
|
}
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number;
|
|
steps?: Step[];
|
|
}
|
|
|
|
const DEFAULT_STEPS: Step[] = [
|
|
{ id: 1, label: 'Personal', icon: User },
|
|
{ id: 2, label: 'Avatar', icon: Camera },
|
|
];
|
|
|
|
export function StepIndicator({ currentStep, steps = DEFAULT_STEPS }: StepIndicatorProps) {
|
|
return (
|
|
<div className="flex items-center justify-center gap-2 mb-8">
|
|
{steps.map((step, index) => {
|
|
const Icon = step.icon;
|
|
const isCompleted = step.id < currentStep;
|
|
const isCurrent = step.id === currentStep;
|
|
|
|
return (
|
|
<div key={step.id} className="flex items-center">
|
|
<div className="flex flex-col items-center">
|
|
<div
|
|
className={`flex h-12 w-12 items-center justify-center rounded-full transition-all duration-300 ${
|
|
isCurrent
|
|
? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/30'
|
|
: isCompleted
|
|
? 'bg-performance-green text-white'
|
|
: 'bg-iron-gray border border-charcoal-outline text-gray-500'
|
|
}`}
|
|
>
|
|
{isCompleted ? (
|
|
<Check className="w-5 h-5" />
|
|
) : (
|
|
<Icon className="w-5 h-5" />
|
|
)}
|
|
</div>
|
|
<span
|
|
className={`mt-2 text-xs font-medium ${
|
|
isCurrent ? 'text-white' : isCompleted ? 'text-performance-green' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</span>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div
|
|
className={`w-16 h-0.5 mx-4 mt-[-20px] ${
|
|
isCompleted ? 'bg-performance-green' : 'bg-charcoal-outline'
|
|
}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |