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.
62 lines
1.1 KiB
62 lines
1.1 KiB
import { Box as MUIBox, BoxProps as MUIBoxProps } from '@mui/material'; |
|
import { FC } from 'react'; |
|
import { |
|
BLUE, |
|
GREY, |
|
PURPLE, |
|
RED, |
|
BORDER_RADIUS, |
|
} from '../lib/consts/DEFAULT_THEME'; |
|
|
|
export type Colours = 'ok' | 'off' | 'error' | 'warning'; |
|
|
|
type DecoratorProps = MUIBoxProps & { |
|
colour: Colours; |
|
}; |
|
|
|
const PREFIX = 'Decorator'; |
|
|
|
const classes = { |
|
ok: `${PREFIX}-ok`, |
|
warning: `${PREFIX}-warning`, |
|
error: `${PREFIX}-error`, |
|
off: `${PREFIX}-off`, |
|
}; |
|
|
|
const Decorator: FC<DecoratorProps> = ({ |
|
colour, |
|
sx, |
|
...restDecoratorProps |
|
}): JSX.Element => ( |
|
<MUIBox |
|
{...{ |
|
...restDecoratorProps, |
|
className: classes[colour], |
|
sx: { |
|
borderRadius: BORDER_RADIUS, |
|
height: '100%', |
|
width: '1.4em', |
|
|
|
[`&.${classes.ok}`]: { |
|
backgroundColor: BLUE, |
|
}, |
|
|
|
[`&.${classes.warning}`]: { |
|
backgroundColor: PURPLE, |
|
}, |
|
|
|
[`&.${classes.error}`]: { |
|
backgroundColor: RED, |
|
}, |
|
|
|
[`&.${classes.off}`]: { |
|
backgroundColor: GREY, |
|
}, |
|
|
|
...sx, |
|
}, |
|
}} |
|
/> |
|
); |
|
|
|
export default Decorator;
|
|
|