forked from cerc-io/snowballtools-base
68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
import React, { useCallback, ComponentPropsWithoutRef } from 'react';
|
|
import { stepTheme, StepTheme } from './Step.theme';
|
|
import {
|
|
CheckRoundFilledIcon,
|
|
ChevronRight,
|
|
} from 'components/shared/CustomIcon';
|
|
|
|
export interface StepProps extends ComponentPropsWithoutRef<'li'>, StepTheme {
|
|
/**
|
|
* The label for the step
|
|
*/
|
|
label: string;
|
|
/**
|
|
* The index of the step
|
|
*/
|
|
index: number;
|
|
/**
|
|
* The total number of steps
|
|
*/
|
|
currentIndex: number;
|
|
}
|
|
|
|
export const Step = ({
|
|
label,
|
|
index,
|
|
currentIndex,
|
|
orientation,
|
|
...props
|
|
}: StepProps) => {
|
|
const theme = stepTheme();
|
|
|
|
const active = currentIndex === index;
|
|
const completed = currentIndex > index;
|
|
|
|
const renderConnector = useCallback(
|
|
(index: number) => {
|
|
if (index === 1) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div aria-hidden className={theme.connector({ orientation })}>
|
|
{orientation === 'horizontal' && <ChevronRight size={12} />}
|
|
</div>
|
|
);
|
|
},
|
|
[orientation, theme],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{renderConnector(index)}
|
|
<li className={theme.wrapper()} {...props}>
|
|
{
|
|
<div className={theme.step({ active, completed })}>
|
|
{completed ? (
|
|
<CheckRoundFilledIcon className="w-full h-full" />
|
|
) : (
|
|
index
|
|
)}
|
|
</div>
|
|
}
|
|
<p className={theme.label()}>{label}</p>
|
|
</li>
|
|
</>
|
|
);
|
|
};
|