Add rezo to footer

components/footer.js

@@ -1,7 +1,11 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
-import {Container, Link, Typography} from '@mui/material'
+import {Box, 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'
 
@@ -29,19 +33,25 @@ const Root = styled('div')((
 
 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>
-            <Typography className={classes.text} align='center' variant='body1'>
-              <Link href='#cgu' onClick={() => setOpen(true)}>
-                Voir les CGU et la politique de confidentialité
-              </Link>
-            </Typography>
-          </Container>
+          <Box 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 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>
+          </Box>
         </footer>
       </Root>
     )