forked from cerc-io/snowballtools-base
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { StepperNav } from './VerticalStepper';
|
|
|
|
const COLOR_COMPLETED = '#059669';
|
|
const COLOR_ACTIVE = '#CFE6FC';
|
|
const COLOR_NOT_STARTED = '#F1F5F9';
|
|
|
|
interface StepperValue {
|
|
step: number;
|
|
route: string;
|
|
label: string;
|
|
}
|
|
|
|
interface StepperProps {
|
|
activeStep: number;
|
|
stepperValues: StepperValue[];
|
|
}
|
|
|
|
const Stepper = ({ activeStep, stepperValues }: StepperProps) => {
|
|
return (
|
|
<StepperNav
|
|
steps={stepperValues.map((stepperValue: StepperValue) => {
|
|
return {
|
|
stepContent: () => (
|
|
<div
|
|
className={`text-sm ${
|
|
activeStep === stepperValue.step
|
|
? 'text-black font-semibold dark:text-foreground'
|
|
: 'text-gray-600 dark:text-foreground-secondary'
|
|
}`}
|
|
>
|
|
{stepperValue.label}
|
|
</div>
|
|
),
|
|
stepStatusCircleSize: 30,
|
|
stepStateColor: `${
|
|
activeStep > stepperValue.step
|
|
? COLOR_COMPLETED
|
|
: activeStep === stepperValue.step
|
|
? COLOR_ACTIVE
|
|
: COLOR_NOT_STARTED
|
|
}`,
|
|
};
|
|
})}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Stepper;
|