KEMBAR78
Material Ui React Cookie Component | PDF | Business | Art
Scribd
Upload
61 views1 page

Material Ui React Cookie Component

This document defines a React component to display a cookie policy notification banner at the bottom of a page. It imports necessary React and Material UI components, defines styles, and renders the banner with header text, description, and primary/secondary action buttons that accept or refuse cookies. The content is passed in as a prop that can be overridden.

Uploaded by

utthamcsC
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
61 views1 page

Material Ui React Cookie Component

This document defines a React component to display a cookie policy notification banner at the bottom of a page. It imports necessary React and Material UI components, defines styles, and renders the banner with header text, description, and primary/secondary action buttons that accept or refuse cookies. The content is passed in as a prop that can be overridden.

Uploaded by

utthamcsC
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';


import Container from '@material-ui/core/Container';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({


container: {
marginLeft: theme.spacing(0)
},
header: {
color: theme.palette.common.white,
},
action: {
marginRight: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
width: '100%',
marginRight: theme.spacing(0),
marginBottom: theme.spacing(2),
}
},
}));

export default function Cookies(props) {


const classes = useStyles();

const content = {
'header': 'Cookie Policy',
'description': 'We use cookies to personalise content, to provide social media
features and to analyse our traffic. We also share information about your use of
our site with our social media, advertising and analytics partners.',
'primary-action': 'Accept cookies',
'secondary-action': 'Refuse cookies',
...props.content
};

return (
<Box position="fixed" width="100%" bottom={0} p={4} zIndex="modal"
color="textSecondary" bgcolor="background.header">
<Container maxWidth="md" className={classes.container}>
<Typography variant="h5" component="h2" gutterBottom={true}
className={classes.header}>{content['header']}</Typography>
<Typography variant="subtitle1" color="textSecondary"
paragraph={true}>{content['description']}</Typography>
<Button variant="contained" color="primary"
className={classes.action}>{content['primary-action']}</Button>
<Button variant="outlined" color="primary"
className={classes.action}>{content['secondary-action']}</Button>
</Container>
</Box>
);
}

You might also like