Add footer to index

components/footer.js

@@ -0,0 +1,35 @@
+import React, {useState} from 'react'
+import {Container, Link, makeStyles, Typography} from '@material-ui/core'
+import CGUDialog from './cgu/cgu-dialog'
+
+const useStyles = makeStyles(theme => ({
+  footer: {
+    padding: theme.spacing(3, 2),
+    marginTop: 'auto',
+    backgroundColor:
+      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
+  },
+  text: {
+    fontWeight: 'bold'
+  }
+}))
+
+export default function Footer() {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <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>
+      </footer>
+    </>
+  )
+}

pages/index.js

@@ -10,6 +10,7 @@ import OndemandVideoIcon from '@material-ui/icons/OndemandVideo'
 import KatKayLa from '../components/kat-kay-la'
 import HeadLayout from '../components/head-layout'
 import Carousel from '../components/carousel'
+import Footer from '../components/footer'
 import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'
 
 export default function Home({kantiteAwtis, kantiteTeks}) {
@@ -27,6 +28,7 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
 
   return (
     <HeadLayout tab={0}>
+      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <Container align='center'>
           <Image
             alt='Logo #OKi'
@@ -43,7 +45,7 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
             {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
           </Grid>
         </Container>
-      <Container style={{marginTop: '1.5em'}} align='center'>
+        <Container style={{marginBlock: '1.5em'}} align='center'>
           <Grid container spacing={2}>
             <Grid item xs={12} md={3}>
               <Button
@@ -107,6 +109,8 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
           handleOpen={handleOpen}
           setHandleOpen={setHandleOpen}
         />
+        <Footer />
+      </div>
     </HeadLayout>
   )
 }