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.
31 lines
697 B
31 lines
697 B
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;
|
|
|