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