107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import Stack from '@mui/material/Stack';
|
||
|
|
import TrapFocus from '@mui/material/Unstable_TrapFocus';
|
||
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
||
|
|
import AppBar from '@mui/material/AppBar';
|
||
|
|
import Toolbar from '@mui/material/Toolbar';
|
||
|
|
import Container from '@mui/material/Container';
|
||
|
|
import IconButton from '@mui/material/IconButton';
|
||
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
||
|
|
import Paper from '@mui/material/Paper';
|
||
|
|
import Fade from '@mui/material/Fade';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
|
||
|
|
export default function CookiesBanner() {
|
||
|
|
const [bannerOpen, setBannerOpen] = React.useState(true);
|
||
|
|
|
||
|
|
const closeBanner = () => {
|
||
|
|
setBannerOpen(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<CssBaseline />
|
||
|
|
<AppBar position="fixed" component="nav">
|
||
|
|
<Toolbar>
|
||
|
|
<IconButton size="large" edge="start" color="inherit" aria-label="menu">
|
||
|
|
<MenuIcon />
|
||
|
|
</IconButton>
|
||
|
|
</Toolbar>
|
||
|
|
</AppBar>
|
||
|
|
<Container component="main" sx={{ pt: 3 }}>
|
||
|
|
<Toolbar />
|
||
|
|
<Typography sx={{ marginBottom: 2 }}>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||
|
|
tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
|
||
|
|
enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
|
||
|
|
imperdiet.
|
||
|
|
</Typography>
|
||
|
|
<Typography sx={{ marginBottom: 2 }}>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||
|
|
tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
|
||
|
|
enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
|
||
|
|
imperdiet.
|
||
|
|
</Typography>
|
||
|
|
</Container>
|
||
|
|
<TrapFocus open disableAutoFocus disableEnforceFocus>
|
||
|
|
<Fade appear={false} in={bannerOpen}>
|
||
|
|
<Paper
|
||
|
|
role="dialog"
|
||
|
|
aria-modal="false"
|
||
|
|
aria-label="Cookie banner"
|
||
|
|
square
|
||
|
|
variant="outlined"
|
||
|
|
tabIndex={-1}
|
||
|
|
sx={{
|
||
|
|
position: 'fixed',
|
||
|
|
bottom: 0,
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
m: 0,
|
||
|
|
p: 2,
|
||
|
|
borderWidth: 0,
|
||
|
|
borderTopWidth: 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Stack
|
||
|
|
direction={{ xs: 'column', sm: 'row' }}
|
||
|
|
sx={{ justifyContent: 'space-between', gap: 2 }}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{ flexShrink: 1, alignSelf: { xs: 'flex-start', sm: 'center' } }}
|
||
|
|
>
|
||
|
|
<Typography sx={{ fontWeight: 'bold' }}>
|
||
|
|
This website uses cookies
|
||
|
|
</Typography>
|
||
|
|
<Typography variant="body2">
|
||
|
|
example.com relies on cookies to improve your experience.
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
<Stack
|
||
|
|
direction={{
|
||
|
|
xs: 'row-reverse',
|
||
|
|
sm: 'row',
|
||
|
|
}}
|
||
|
|
sx={{
|
||
|
|
gap: 2,
|
||
|
|
flexShrink: 0,
|
||
|
|
alignSelf: { xs: 'flex-end', sm: 'center' },
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button size="small" onClick={closeBanner} variant="contained">
|
||
|
|
Allow all
|
||
|
|
</Button>
|
||
|
|
<Button size="small" onClick={closeBanner}>
|
||
|
|
Reject all
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
</Stack>
|
||
|
|
</Paper>
|
||
|
|
</Fade>
|
||
|
|
</TrapFocus>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
}
|