68 lines
2.2 KiB
TypeScript
68 lines
2.2 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-blue-500 text-white border-blue-500"
|
|
: "bg-gray-200 text-gray-500 border-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-700"
|
|
)}
|
|
>
|
|
{index + 1}
|
|
</div>
|
|
<div className="mt-2 text-xs font-medium text-center">
|
|
<p className={cn(
|
|
"font-semibold",
|
|
index === currentStep ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"
|
|
)}>
|
|
{step.title}
|
|
</p>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{step.description}</p>
|
|
{step.details && index === currentStep && (
|
|
<p className="text-xs text-blue-500 dark:text-blue-300 mt-1 font-medium">
|
|
{step.details}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">
|
|
<div
|
|
className={cn(
|
|
"h-full transition-all duration-300",
|
|
index < currentStep ? "bg-blue-500" : "bg-transparent"
|
|
)}
|
|
style={{ width: index < currentStep ? '100%' : '0%' }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
Steps.displayName = "Steps"
|
|
|
|
export { Steps }
|