You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
635 B
25 lines
635 B
export interface StepperProps { |
|
current: number; |
|
steps: number; |
|
className?: string; |
|
} |
|
|
|
export function Stepper(props: StepperProps) { |
|
const percentage = (props.current / props.steps) * 100; |
|
|
|
return ( |
|
<div className={props.className}> |
|
<p className="mb-2"> |
|
{props.current}/{props.steps} |
|
</p> |
|
<div className="max-w-full h-1 w-32 bg-onboarding-bar rounded-full overflow-hidden"> |
|
<div |
|
className="h-full bg-onboarding-barFilled transition-[width] rounded-full" |
|
style={{ |
|
width: `${percentage.toFixed(0)}%`, |
|
}} |
|
/> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|