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.
37 lines
722 B
37 lines
722 B
import { makeStyles } from '@material-ui/core/styles'; |
|
import { |
|
BLUE, |
|
GREY, |
|
PURPLE, |
|
RED, |
|
BORDER_RADIUS, |
|
} from '../lib/consts/DEFAULT_THEME'; |
|
|
|
export type Colours = 'ok' | 'off' | 'error' | 'warning'; |
|
|
|
const useStyles = makeStyles(() => ({ |
|
decorator: { |
|
width: '1.4em', |
|
height: '100%', |
|
borderRadius: BORDER_RADIUS, |
|
}, |
|
ok: { |
|
backgroundColor: BLUE, |
|
}, |
|
warning: { |
|
backgroundColor: PURPLE, |
|
}, |
|
error: { |
|
backgroundColor: RED, |
|
}, |
|
off: { |
|
backgroundColor: GREY, |
|
}, |
|
})); |
|
|
|
const Decorator = ({ colour }: { colour: Colours }): JSX.Element => { |
|
const classes = useStyles(); |
|
return <div className={`${classes.decorator} ${classes[colour]}`} />; |
|
}; |
|
|
|
export default Decorator;
|
|
|