存客宝 React

Cunkebao/app/workspace/moments-sync/components/step-indicator.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+interface Step {
+  id: number
+  title: string
+  subtitle: string
+}
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps?: Step[]
+}
+
+export function StepIndicator({
+  currentStep,
+  steps = [
+    { id: 1, title: "步骤 1", subtitle: "基础设置" },
+    { id: 2, title: "步骤 2", subtitle: "设备选择" },
+    { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+  ],
+}: StepIndicatorProps) {
+  return (
+    <div className="relative flex justify-between px-6">
+      {steps.map((step) => (
+        <div
+          key={step.id}
+          className={`flex flex-col items-center relative z-10 transition-colors ${
+            currentStep >= step.id ? "text-blue-600" : "text-gray-400"
+          }`}
+        >
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${
+              currentStep >= step.id
+                ? "bg-blue-600 text-white shadow-sm"
+                : "bg-white border border-gray-200 text-gray-400"
+            }`}
+          >
+            {step.id}
+          </div>
+          <div className="text-xs mt-2 font-medium">{step.subtitle}</div>
+        </div>
+      ))}
+      <div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-100 -z-10">
+        <div
+          className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
+          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+