Nabarun Gogoi
cfb299c79e
* Implement vertical stepper in create project page * Handle if active step is not found --------- Co-authored-by: neeraj <neeraj.rtly@gmail.com>
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { StepperNav } from 'vertical-stepper-nav';
|
|
|
|
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;
|