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