forked from cerc-io/snowballtools-base
43 lines
936 B
TypeScript
43 lines
936 B
TypeScript
import { Fragment, ComponentPropsWithoutRef } from 'react';
|
|
import { stepsTheme, StepsTheme } from './Steps.theme';
|
|
import { Step, StepProps, StepTheme } from './Step';
|
|
|
|
export interface StepsProps
|
|
extends ComponentPropsWithoutRef<'ul'>,
|
|
StepsTheme,
|
|
Pick<StepTheme, 'orientation'> {
|
|
/**
|
|
* The index of the current step
|
|
*/
|
|
currentIndex: number;
|
|
/**
|
|
* The steps to render
|
|
*/
|
|
steps: Pick<StepProps, 'label'>[];
|
|
}
|
|
|
|
export const Steps = ({
|
|
currentIndex,
|
|
steps = [],
|
|
className,
|
|
orientation,
|
|
...props
|
|
}: StepsProps) => {
|
|
const theme = stepsTheme();
|
|
|
|
return (
|
|
<ul className={theme.root({ class: className, orientation })} {...props}>
|
|
{steps.map((step, i) => (
|
|
<Fragment key={i}>
|
|
<Step
|
|
{...step}
|
|
orientation={orientation}
|
|
currentIndex={currentIndex}
|
|
index={i + 1}
|
|
/>
|
|
</Fragment>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|