frontend/components/Banner/index.tsx (view raw)
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;