wwf
2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { type FC, Fragment } from 'react'
import type { Step } from './step'
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>
}