chinwagsocial/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx

26 lines
790 B
React
Raw Normal View History

2023-05-23 18:52:27 +10:00
import { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Check } from 'mastodon/components/check';
import classNames from 'classnames';
const ProgressIndicator = ({ steps, completed }) => (
<div className='onboarding__progress-indicator'>
{(new Array(steps)).fill().map((_, i) => (
2023-05-23 18:52:27 +10:00
<Fragment key={i}>
{i > 0 && <div className={classNames('onboarding__progress-indicator__line', { active: completed > i })} />}
<div className={classNames('onboarding__progress-indicator__step', { active: completed > i })}>
{completed > i && <Check />}
</div>
2023-05-23 18:52:27 +10:00
</Fragment>
))}
</div>
);
ProgressIndicator.propTypes = {
steps: PropTypes.number.isRequired,
completed: PropTypes.number,
};
export default ProgressIndicator;