存客宝 React

Cunkebao/app/workspace/auto-like/components/step-indicator.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { CheckIcon } from "lucide-react"
+import { cn } from "@/app/lib/utils"
+
+interface Step {
+  id: string
+  name: string
+  description?: string
+}
+
+interface StepIndicatorProps {
+  steps: Step[]
+  currentStep: number
+  onStepClick?: (index: number) => void
+}
+
+export function StepIndicator({ steps, currentStep, onStepClick }: StepIndicatorProps) {
+  return (
+    <div className="w-full">
+      <ol className="flex items-center w-full">
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep
+          const isCurrent = index === currentStep
+          const isClickable = onStepClick && index <= currentStep
+
+          return (
+            <li
+              key={step.id}
+              className={cn("flex items-center space-x-2.5 flex-1", index !== steps.length - 1 ? "relative" : "")}
+            >
+              <span
+                className={cn(
+                  "flex items-center justify-center w-8 h-8 rounded-full shrink-0 text-sm font-medium",
+                  isCompleted
+                    ? "bg-primary text-primary-foreground"
+                    : isCurrent
+                      ? "bg-primary/20 text-primary border border-primary"
+                      : "bg-muted text-muted-foreground",
+                  isClickable ? "cursor-pointer" : "",
+                )}
+                onClick={() => isClickable && onStepClick(index)}
+              >
+                {isCompleted ? <CheckIcon className="w-5 h-5" /> : index + 1}
+              </span>
+              <span>
+                <h3
+                  className={cn(
+                    "font-medium leading-tight",
+                    isCompleted || isCurrent ? "text-primary" : "text-muted-foreground",
+                  )}
+                >
+                  {step.name}
+                </h3>
+                {step.description && (
+                  <p className="text-sm text-muted-foreground hidden md:block">{step.description}</p>
+                )}
+              </span>
+              {index !== steps.length - 1 && (
+                <div
+                  className={cn(
+                    "absolute top-4 left-8 -translate-y-1/2 w-full h-0.5",
+                    isCompleted ? "bg-primary" : "bg-muted",
+                  )}
+                  style={{ width: "calc(100% - 2rem)" }}
+                ></div>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </div>
+  )
+}
+