69 lines
2.1 KiB
TypeScript
Executable File
69 lines
2.1 KiB
TypeScript
Executable File
import React from "react"
|
|
import { cn } from "@/app/lib/utils"
|
|
|
|
interface StepsProps {
|
|
currentStep: number
|
|
className?: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
interface StepProps {
|
|
title: string
|
|
description?: string
|
|
}
|
|
|
|
export function Steps({ currentStep, className, children }: StepsProps) {
|
|
const steps = React.Children.toArray(children)
|
|
|
|
return (
|
|
<div className={cn("flex items-center", className)}>
|
|
{steps.map((step, index) => {
|
|
const isActive = index === currentStep
|
|
const isCompleted = index < currentStep
|
|
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<div className="flex items-center">
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium",
|
|
isActive && "bg-blue-500 text-white",
|
|
isCompleted && "bg-green-500 text-white",
|
|
!isActive && !isCompleted && "bg-gray-200 text-gray-500",
|
|
)}
|
|
>
|
|
{isCompleted ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
index + 1
|
|
)}
|
|
</div>
|
|
<div className="ml-3">{step}</div>
|
|
</div>
|
|
|
|
{index < steps.length - 1 && (
|
|
<div className={cn("flex-1 h-0.5 mx-4", index < currentStep ? "bg-green-500" : "bg-gray-200")} />
|
|
)}
|
|
</React.Fragment>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function Step({ title, description }: StepProps) {
|
|
return (
|
|
<div>
|
|
<div className="text-sm font-medium">{title}</div>
|
|
{description && <div className="text-xs text-gray-500">{description}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|