40 lines
915 B
React
40 lines
915 B
React
|
import React, { Fragment } from 'react';
|
||
|
|
import cx from 'classnames';
|
||
|
|
import { styles } from './styles';
|
||
|
|
|
||
|
|
const STATS = {
|
||
|
|
critical: {
|
||
|
|
color: styles.critical,
|
||
|
|
bars: styles.oneBar,
|
||
|
|
},
|
||
|
|
danger: {
|
||
|
|
color: styles.danger,
|
||
|
|
bars: styles.twoBars,
|
||
|
|
},
|
||
|
|
warning: {
|
||
|
|
color: styles.warning,
|
||
|
|
bars: styles.threeBars,
|
||
|
|
},
|
||
|
|
normal: {
|
||
|
|
color: styles.normal,
|
||
|
|
bars: styles.fourBars,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const Icon = ({ level, grayscale }) => {
|
||
|
|
const color = grayscale ? styles.normal : STATS[level].color;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
<div className={cx(styles.signalBars, color, STATS[level].bars)}>
|
||
|
|
<div className={cx(styles.firstBar, styles.bar)} />
|
||
|
|
<div className={cx(styles.secondBar, styles.bar)} />
|
||
|
|
<div className={cx(styles.thirdBar, styles.bar)} />
|
||
|
|
<div className={cx(styles.fourthBar, styles.bar)} />
|
||
|
|
</div>
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Icon;
|