dify/web/app/components/datasets/create/stepper/index.tsx

import type { FC } from 'react'
import type { Step } from './step'
import { Fragment } from 'react'
import { StepperStep } from './step'

export type StepperProps = {
  steps: Step[]
  activeIndex: number
}

export const Stepper: FC<StepperProps> = (props) => {
  const { steps, activeIndex } = props
  return (
    <div className="flex items-center gap-3">
      {steps.map((step, index) => {
        const isLast = index === steps.length - 1
        return (
          <Fragment key={index}>
            <StepperStep {...step} activeIndex={activeIndex} index={index} />
            {!isLast && <div className="h-px w-4 bg-divider-deep" />}
          </Fragment>
        )
      })}
    </div>
  )
}