50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from "react";
|
|
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"
|
|
: "text-gray-600"
|
|
}`}
|
|
>
|
|
{stepperValue.label}
|
|
</div>
|
|
),
|
|
stepStatusCircleSize: 30,
|
|
stepStateColor: `${
|
|
activeStep > stepperValue.step
|
|
? COLOR_COMPLETED
|
|
: activeStep === stepperValue.step
|
|
? COLOR_ACTIVE
|
|
: COLOR_NOT_STARTED
|
|
}`,
|
|
};
|
|
})}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Stepper;
|