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