48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface Step {
|
|
id: number
|
|
title: string
|
|
icon: React.ReactNode
|
|
}
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number
|
|
steps: Step[]
|
|
}
|
|
|
|
export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
|
|
return (
|
|
<div className="flex justify-between items-center w-full mb-6 px-4 relative">
|
|
{/* 连接线 */}
|
|
<div className="absolute top-8 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
|
|
|
|
{steps.map((step, index) => {
|
|
const isCompleted = index < currentStep
|
|
const isActive = index === currentStep
|
|
|
|
return (
|
|
<div key={step.id} className="flex flex-col items-center z-10">
|
|
<div
|
|
className={cn(
|
|
"w-16 h-16 rounded-full flex items-center justify-center mb-2",
|
|
isActive ? "bg-blue-500 text-white" :
|
|
isCompleted ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
|
|
)}
|
|
>
|
|
{step.icon}
|
|
</div>
|
|
<span className={cn("text-sm", isActive ? "text-blue-500 font-medium" : isCompleted ? "text-blue-500" : "text-gray-500")}>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|