72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '../../lib/utils';
|
|
import { Check } from 'lucide-react';
|
|
|
|
interface Step {
|
|
number: number;
|
|
title: string;
|
|
}
|
|
|
|
interface StepIndicatorProps {
|
|
steps: Step[];
|
|
currentStep: number;
|
|
}
|
|
|
|
const StepIndicator: React.FC<StepIndicatorProps> = ({ steps, currentStep }) => {
|
|
return (
|
|
<div className="flex items-center justify-between w-full max-w-3xl mx-auto px-4">
|
|
{steps.map((step, index) => {
|
|
const isCompleted = currentStep > step.number;
|
|
const isCurrent = currentStep === step.number;
|
|
const isLast = index === steps.length - 1;
|
|
|
|
return (
|
|
<React.Fragment key={step.number}>
|
|
<div className="flex flex-col items-center">
|
|
{/* Circle */}
|
|
<div
|
|
className={cn(
|
|
"w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all",
|
|
isCompleted && "bg-primary text-primary-foreground",
|
|
isCurrent && "bg-primary text-primary-foreground ring-4 ring-primary/20",
|
|
!isCompleted && !isCurrent && "bg-muted text-muted-foreground"
|
|
)}
|
|
>
|
|
{isCompleted ? (
|
|
<Check className="w-5 h-5" />
|
|
) : (
|
|
step.number
|
|
)}
|
|
</div>
|
|
{/* Title */}
|
|
<span
|
|
className={cn(
|
|
"mt-2 text-xs font-medium text-center",
|
|
isCurrent && "text-foreground",
|
|
!isCurrent && "text-muted-foreground"
|
|
)}
|
|
>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Connector Line */}
|
|
{!isLast && (
|
|
<div className="flex-1 h-0.5 mx-2 -mt-6">
|
|
<div
|
|
className={cn(
|
|
"h-full transition-all",
|
|
isCompleted ? "bg-primary" : "bg-muted"
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepIndicator;
|