Cédric FAMIBELLE-PRONZOLA
60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import {useState} from 'react'
|
|
import {styled} from '@mui/material/styles'
|
|
import {Box, Container, Link, Typography, useMediaQuery} from '@mui/material'
|
|
|
|
import {rezoLis} from '../lib/rezo-lis'
|
|
|
|
import CGUDialog from './cgu/cgu-dialog'
|
|
import Rezo from './rezo'
|
|
|
|
const PREFIX = 'footer'
|
|
|
|
const classes = {
|
|
footer: `${PREFIX}-footer`,
|
|
text: `${PREFIX}-text`
|
|
}
|
|
|
|
const Root = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.footer}`]: {
|
|
padding: theme.spacing(1, 2),
|
|
marginTop: 'auto',
|
|
backgroundColor:
|
|
theme.palette.mode === 'light' ? theme.palette.grey[100] : '#1E3526'
|
|
},
|
|
|
|
[`& .${classes.text}`]: {
|
|
fontWeight: 'bold'
|
|
}
|
|
}))
|
|
|
|
export default function Footer() {
|
|
const [open, setOpen] = useState(false)
|
|
const isMobile = useMediaQuery('(max-width:527px)')
|
|
|
|
return (
|
|
(
|
|
<Root>
|
|
<CGUDialog open={open} setOpen={setOpen} />
|
|
<footer id='cgu' className={classes.footer}>
|
|
<Container sx={{display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center', flexDirection: isMobile ? 'column-reverse' : ''}}>
|
|
<Box sx={{textAlign: isMobile ? 'center' : '', marginTop: isMobile ? '1em' : ''}}>
|
|
<Typography className={classes.text} align='center' variant='body1'>
|
|
<Link underline='hover' href='#cgu' onClick={() => setOpen(true)}>
|
|
Voir les CGU et la politique de confidentialité
|
|
</Link>
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{display: 'flex', justifyContent: 'center'}}>
|
|
{rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
|
|
</Box>
|
|
</Container>
|
|
</footer>
|
|
</Root>
|
|
)
|
|
)
|
|
}
|