Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 1x 8x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {CLASS_INDICATOR} from './settings.js'
import {COLORS} from '../../settings.js'
const Indicator = ({indicatorBottom, indicatorTotal, percentage, color}) => {
return (
<div
className={cx(
CLASS_INDICATOR,
{
[`${CLASS_INDICATOR}--color-${color}`]: color
},
`${CLASS_INDICATOR}--${indicatorBottom ? 'bottom' : 'top'}`
)}
>
<strong>{percentage}</strong>
{indicatorTotal ? `/100` : `%`}
</div>
)
}
Indicator.displayName = 'Indicator'
Indicator.propTypes = {
indicatorBottom: PropTypes.string,
indicatorTotal: PropTypes.number,
percentage: PropTypes.number,
color: PropTypes.oneOf(Object.values(COLORS))
}
export default Indicator
|