1import {Icon} from '@material-ui/core';
 2import Button from '@material-ui/core/Button';
 3import {makeStyles} from '@material-ui/core/styles';
 4import Markdown from '../Markdown';
 5
 6interface Props {
 7  message: string;
 8  open: boolean;
 9  onClear?: () => void;
10}
11
12const Banner = (props: Props) => {
13  const {message, open, onClear} = props;
14  const classes = useStyles();
15
16  if (!open) return null;
17
18  return (
19    <div className={classes.banner}>
20      <Markdown className={classes.htmlReset}>{message}</Markdown>
21      <Button
22        className={classes.clear}
23        onClick={e => {
24          e.stopPropagation();
25          onClear();
26        }}
27      >
28        <Icon>close</Icon>
29      </Button>
30    </div>
31  );
32};
33
34const useStyles = makeStyles(theme => ({
35  banner: {
36    position: 'relative',
37    background: `linear-gradient(90deg, #FCDC61 20%, #78B2AC 90%)`,
38    width: '100%',
39    padding: '12px 60px',
40    textAlign: 'center',
41    zIndex: theme.zIndex.appBar - 1,
42    color: 'black',
43  },
44  clear: {
45    position: 'absolute',
46    right: '12px',
47    bottom: '50%',
48    transform: 'translateY(50%)',
49    minWidth: '44px',
50    padding: '12px',
51    lineHeight: '1.4em',
52  },
53  htmlReset: {
54    '& a': {
55      color: 'inherit',
56      margin: 0,
57    },
58    '& p': {
59      margin: 0,
60    },
61  },
62}));
63
64export default Banner;