adilallo
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import type { StepperViewProps } from "./Stepper.types";
|
|
|
|
export function StepperView({
|
|
active,
|
|
totalSteps,
|
|
className,
|
|
stepperClasses,
|
|
}: StepperViewProps) {
|
|
return (
|
|
<div
|
|
className={`${stepperClasses} ${className}`}
|
|
role="progressbar"
|
|
aria-valuenow={active}
|
|
aria-valuemin={1}
|
|
aria-valuemax={totalSteps}
|
|
aria-label={`Step ${active} of ${totalSteps}`}
|
|
>
|
|
{Array.from({ length: totalSteps }, (_, index) => {
|
|
const stepNumber = index + 1;
|
|
const isActive = stepNumber === active;
|
|
|
|
return (
|
|
<div
|
|
key={stepNumber}
|
|
className="shrink-0 w-[12px] h-[12px] flex items-center justify-center"
|
|
>
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
className={isActive ? "opacity-100" : "opacity-30"}
|
|
>
|
|
<circle
|
|
cx="6"
|
|
cy="6"
|
|
r="5.5"
|
|
fill="var(--color-surface-inverse-secondary)"
|
|
stroke="var(--color-surface-inverse-secondary)"
|
|
strokeWidth="1"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|