You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
697 B
32 lines
697 B
4 years ago
|
import { makeStyles } from '@material-ui/core/styles';
|
||
|
|
import { BLUE, GREY, PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
|
||
|
|
|
||
|
|
export type Colours = 'ok' | 'off' | 'error' | 'warning';
|
||
|
|
|
||
|
|
const useStyles = makeStyles(() => ({
|
||
|
|
decorator: {
|
||
|
|
width: '20px',
|
||
|
|
height: '100%',
|
||
|
|
borderRadius: 2,
|
||
|
|
},
|
||
|
|
ok: {
|
||
|
|
backgroundColor: BLUE,
|
||
|
|
},
|
||
|
|
warning: {
|
||
|
|
backgroundColor: PURPLE_OFF,
|
||
|
|
},
|
||
|
|
error: {
|
||
|
|
backgroundColor: RED_ON,
|
||
|
|
},
|
||
|
|
off: {
|
||
|
|
backgroundColor: GREY,
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => {
|
||
|
|
const classes = useStyles();
|
||
|
|
return <div className={`${classes.decorator} ${classes[colour]}`} />;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Decorator;
|