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

import cn from '@/utils/classnames'
import React from 'react'

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)