noble briar
import { Button, CloseButton, createStyles, Group, Paper, Text } from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks';
const useStyles = createStyles((theme) => ({
cookieBox: {
position: 'sticky',
maxWidth: '25%',
bottom: theme.spacing.md,
float: 'right',
margin: theme.spacing.md,
backgroundColor: theme.colors.dark[4],
[theme.fn.smallerThan('sm')]: {
maxWidth: 'unset',
width: '100%',
borderRadius: 0,
bottom: 0,
margin: 0,
},
},
}));
const CookieBanner = () => {
const { classes } = useStyles();
const [accepted, setAccepted] = useLocalStorage({ key: 'cookies', defaultValue: false });
return (
<Paper
withBorder
p="lg"
radius="md"
shadow="md"
className={classes.cookieBox}
sx={{ display: (accepted ? 'none' : 'unset') }}
>
<Group position="apart" mb="xs">
<Text size="md" weight={500}>
Kakor 🍪
</Text>
<CloseButton mr={-9} mt={-9} />
</Group>
<Text color="dimmed" size="xs">
Genom att använda våran hemsida så godkäner du användingen utav cookies.
Du kan läsa mer om våra cookies nedanför.
</Text>
<Group position="right" mt="xs">
<Button variant="default" size="xs">
Läs mer
</Button>
<Button variant="outline" size="xs" onClick={() => setAccepted(true)}>
Okej
</Button>
</Group>
</Paper>
);
};
export { CookieBanner };
Anyone has a suggestion on how I can remove the extra margin that the cookie banner adds to the bottom of the page?
warped spire