67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import activeStepper from "../../assets/images/active-stepper.png";
|
|
|
|
interface Step {
|
|
key: string | number;
|
|
label: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
interface StepperProps {
|
|
steps: Step[];
|
|
activeStep: string | number;
|
|
}
|
|
|
|
export const Stepper: React.FC<StepperProps> = ({ steps, activeStep }) => {
|
|
return (
|
|
<div className="w-full px-4 overflow-x-auto overflow-y-hidden select-none">
|
|
<div className="relative min-w-[300px]">
|
|
<div className="absolute left-0 right-0 top-1/2 h-[0.5px] bg-primary-800">
|
|
<div className="h-1 transition-all duration-300"></div>
|
|
</div>
|
|
|
|
<div className="relative flex justify-between sm:justify-center sm:gap-20 md:gap-25 lg:gap-30">
|
|
{steps.map((step) => {
|
|
const isActive = step.key === activeStep;
|
|
|
|
return (
|
|
<div
|
|
key={step.key}
|
|
className={`flex flex-col items-center px-2 sm:px-0`}
|
|
>
|
|
<div
|
|
className={`relative z-10 flex h-6 w-6 sm:h-7 sm:w-7 items-center justify-center mt-[25px] bg-white dark:bg-gray-900 rounded-full ${
|
|
step?.disabled ? "border-gray-200" : "border-gray-300"
|
|
} ${!isActive && "border-1 dark:border-white2-600"}`}
|
|
>
|
|
{isActive ? (
|
|
<img
|
|
src={activeStepper}
|
|
alt="Active step"
|
|
className="h-full"
|
|
/>
|
|
) : (
|
|
<span
|
|
className={`text-sm font-medium dark:text-white p-2 sm:p-3 `}
|
|
></span>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className={`mt-2 text-center text-xs sm:text-sm font-medium whitespace-nowrap ${
|
|
step?.disabled
|
|
? "text-gray-300 dark:text-gray-100 "
|
|
: "text-white1-900 dark:text-gray2-300 "
|
|
}`}
|
|
>
|
|
{step.label}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|