33 lines
956 B
JavaScript
33 lines
956 B
JavaScript
import React, { Fragment } from 'react';
|
|
import cx from 'classnames';
|
|
import { styles } from './styles';
|
|
|
|
const SLOW_CONNECTIONS_TYPES = {
|
|
critical: {
|
|
level: styles.bad,
|
|
bars: styles.oneBar,
|
|
},
|
|
danger: {
|
|
level: styles.bad,
|
|
bars: styles.twoBars,
|
|
},
|
|
warning: {
|
|
level: styles.warning,
|
|
bars: styles.threeBars,
|
|
},
|
|
};
|
|
|
|
const SlowConnection = ({ children, effectiveConnectionType, iconOnly }) => (
|
|
<Fragment>
|
|
<div className={cx(styles.signalBars, styles.sizingBox, SLOW_CONNECTIONS_TYPES[effectiveConnectionType].level, SLOW_CONNECTIONS_TYPES[effectiveConnectionType].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>
|
|
{!iconOnly ? (<span>{children}</span>) : null}
|
|
</Fragment>
|
|
);
|
|
|
|
export default SlowConnection;
|