mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-14 17:20:56 -05:00
9c4cc289d2
* use class name instead of id * storybook rename * refactor types * linting * prettier * classname in react component * lint error * add classname in confirm-email success * remove decorators * allow focusing with the tab key to get information about the progress * group form and radio chip elements * single type assertion --------- Co-authored-by: Rebeka <o.dekany@gmail.com> GitOrigin-RevId: 58a64ebdde5c57619a81ae4b68cdb8a6b44dc295
27 lines
665 B
TypeScript
27 lines
665 B
TypeScript
import classNames from 'classnames'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export function Stepper({ steps, active }: { steps: number; active: number }) {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<div
|
|
className="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>
|
|
)
|
|
}
|