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