28 lines
890 B
TypeScript
28 lines
890 B
TypeScript
|
import React, { ReactElement } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import { ProgressDropdownOption, ProgressDropdownOptionPropType } from './types';
|
||
|
|
|
||
|
|
const ProgressDiscreteBar = ({ options }: { options: ProgressDropdownOption[] }): ReactElement => {
|
||
|
|
return (
|
||
|
|
<div className="flex">
|
||
|
|
{options.map((option, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className={classnames('mr-1 h-1 grow first:rounded-l-sm last:mr-0 last:rounded-r-sm', {
|
||
|
|
'bg-black': !option.activated && !option.completed,
|
||
|
|
'bg-primary-main': option.activated && !option.completed,
|
||
|
|
'bg-primary-light': option.completed,
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ProgressDiscreteBar.propTypes = {
|
||
|
|
options: PropTypes.arrayOf(ProgressDropdownOptionPropType).isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProgressDiscreteBar;
|