mirror of https://github.com/langgenius/dify.git
35 lines
793 B
TypeScript
35 lines
793 B
TypeScript
import type { FC } from 'react'
|
|
import type { Step } from './step'
|
|
import { StepperStep } from './step'
|
|
|
|
export type StepperProps = {
|
|
steps: Step[]
|
|
activeIndex: number
|
|
}
|
|
|
|
function join<T, R = T>(array: T[], sep: R): Array<T | R> {
|
|
return array.reduce((acc, item, index) => {
|
|
if (index === 0)
|
|
return [item]
|
|
|
|
return acc.concat([sep, item])
|
|
}, [] as Array<T | R>)
|
|
}
|
|
|
|
export const Stepper: FC<StepperProps> = (props) => {
|
|
const { steps, activeIndex } = props
|
|
return <div className='flex items-center gap-3'>
|
|
{join(
|
|
steps.map((step, index) => (
|
|
<StepperStep
|
|
key={index}
|
|
{...step}
|
|
activeIndex={activeIndex}
|
|
index={index}
|
|
/>
|
|
)),
|
|
<div className="w-4 h-px bg-text-quaternary" />,
|
|
)}
|
|
</div>
|
|
}
|