68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface Step {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
details?: string
|
|
}
|
|
|
|
interface StepsProps {
|
|
steps: Step[]
|
|
currentStep: number
|
|
className?: string
|
|
}
|
|
|
|
const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
|
|
({ steps, currentStep, className }, ref) => {
|
|
return (
|
|
<div ref={ref} className={cn("flex items-center justify-between w-full mb-6", className)}>
|
|
{steps.map((step, index) => (
|
|
<div key={step.id} className="flex-1 flex flex-col items-center">
|
|
<div
|
|
className={cn(
|
|
"w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-colors",
|
|
index <= currentStep
|
|
? "bg-primary text-primary-foreground border-primary shadow-sm"
|
|
: "bg-muted text-muted-foreground border-muted"
|
|
)}
|
|
>
|
|
{index + 1}
|
|
</div>
|
|
<div className="mt-2 text-xs font-medium text-center">
|
|
<p className={cn(
|
|
"font-semibold",
|
|
index === currentStep ? "text-primary" : "text-muted-foreground"
|
|
)}>
|
|
{step.title}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{step.description}</p>
|
|
{step.details && index === currentStep && (
|
|
<p className="text-xs text-primary mt-1 font-medium">
|
|
{step.details}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div className="flex-1 h-px bg-border mx-2">
|
|
<div
|
|
className={cn(
|
|
"h-full transition-all duration-300",
|
|
index < currentStep ? "bg-primary" : "bg-transparent"
|
|
)}
|
|
style={{ width: index < currentStep ? '100%' : '0%' }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
Steps.displayName = "Steps"
|
|
|
|
export { Steps }
|