Tim DownandCopybot
452d854d5b
Unified access onboarding data collection pages GitOrigin-RevId: c56a3d52f749883eeb2302e22aaf6bdf1239160c
36 lines
776 B
TypeScript
36 lines
776 B
TypeScript
import classNames from 'classnames'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export function CiamStepper({
|
|
steps,
|
|
active,
|
|
}: {
|
|
steps: number
|
|
active: number
|
|
}) {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<div className="ciam-stepper-container">
|
|
<div
|
|
className="ciam-stepper"
|
|
role="progressbar"
|
|
aria-label={t('progress_bar_percentage')}
|
|
aria-valuenow={active + 1}
|
|
aria-valuemax={steps}
|
|
tabIndex={0}
|
|
>
|
|
{Array.from({ length: steps }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={classNames({
|
|
step: true,
|
|
active: i === active,
|
|
completed: i < active,
|
|
})}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|