dify

dify/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx

@@ -0,0 +1,33 @@
+import cn from '@/utils/classnames'
+import React from 'react'
+
+export type Step = {
+  label: string
+  value: string
+}
+
+type StepIndicatorProps = {
+  currentStep: number
+  steps: Step[]
+}
+
+const StepIndicator = ({
+  currentStep,
+  steps,
+}: StepIndicatorProps) => {
+  return (
+    <div className='flex gap-x-1'>
+      {steps.map((step, index) => {
+        const isActive = index === currentStep - 1
+        return (
+          <div
+            key={step.value}
+            className={cn('h-1 w-1 rounded-lg bg-divider-solid', isActive && 'w-2 bg-state-accent-solid')}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(StepIndicator)