71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
'use client'
|
|
|
|
import {useState} from 'react'
|
|
import {usePathname} from 'next/navigation'
|
|
import {styled} from '@mui/material/styles'
|
|
import Box from '@mui/material/Box'
|
|
import Container from '@mui/material/Container'
|
|
import Typography from '@mui/material/Typography'
|
|
import Button from '@mui/material/Button'
|
|
import {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.grey[100],
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: '#1E3526'
|
|
})
|
|
},
|
|
|
|
[`& .${classes.text}`]: {
|
|
fontWeight: 'bold'
|
|
}
|
|
}))
|
|
|
|
export default function Footer() {
|
|
const pathname = usePathname()
|
|
const [open, setOpen] = useState(false)
|
|
const isMobile = useMediaQuery('(max-width:527px)')
|
|
const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]
|
|
|
|
return (
|
|
(
|
|
<Root>
|
|
<CGUDialog open={open} setOpen={setOpen} />
|
|
<footer>
|
|
<Box sx={{ml: selectedPath === 'paroles' && !isMobile ? '240px' : ''}} 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' : ''}}>
|
|
<Button color='primary' onClick={() => setOpen(true)}>
|
|
<Typography variant='button' sx={{fontWeight: 'bold'}}>Voir les CGU et la politique de confidentialité</Typography>
|
|
</Button>
|
|
</Box>
|
|
<Box sx={{display: 'flex', justifyContent: 'center'}}>
|
|
{rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
</footer>
|
|
</Root>
|
|
)
|
|
)
|
|
}
|