Replace links by RezoMenu component

pages/index.js

@@ -1,19 +1,53 @@
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 import Image from 'next/image'
-import {Button, Container, Grid, Typography, useMediaQuery, Link} from '@material-ui/core'
+import {Button, Container, Grid, Typography, useMediaQuery} from '@material-ui/core'
+import {makeStyles} from '@material-ui/core/styles'
 import HelpIcon from '@material-ui/icons/Help'
-import ChatIcon from '@material-ui/icons/Chat'
-import GroupAddIcon from '@material-ui/icons/GroupAdd'
-import OndemandVideoIcon from '@material-ui/icons/OndemandVideo'
+import GroupIcon from '@material-ui/icons/Group'
+import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import {Pleroma, Peertube} from '@icons-pack/react-simple-icons'
 
 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'
+import RezoMenu from '../components/rezo-menu'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(2)
+    }
+  }
+}))
+
+const REZO = [
+  {
+    id: 'mizik',
+    tit: 'Mizik',
+    icon: <MusicNoteIcon />
+  },
+  {
+    id: 'pale',
+    tit: 'Palé',
+    icon: <Pleroma />
+  },
+  {
+    id: 'gade',
+    tit: 'Gadé',
+    icon: <Peertube />
+  },
+  {
+    id: 'mobilize',
+    tit: 'Mobilizé',
+    icon: <GroupIcon />
+  }
+]
 
 export default function Home({kantiteAwtis, kantiteTeks}) {
+  const classes = useStyles()
   const [handleOpen, setHandleOpen] = useState(false)
   const handleClick = () => {
     setHandleOpen(true)
@@ -40,68 +74,21 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
             Organisation KA Internationale
           </Typography>
         </Container>
-        <Container style={{marginTop: '1.5em'}}>
-          <Grid container spacing={3}>
-            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
-          </Grid>
-        </Container>
-        <Container style={{marginBlock: '1.5em'}} align='center'>
-          <Grid container spacing={2}>
-            <Grid item xs={12} md={3}>
+        <Container className={classes.root} align='center'>
+          <RezoMenu data={REZO} />
           <Button
-                startIcon={<HelpIcon size='large' style={{fontSize: 40}} />}
-                size='small'
+            startIcon={<HelpIcon style={{fontSize: 25}} />}
+            size='large'
             variant='contained'
             color='primary'
             onClick={handleClick}
           >
-                <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                  Guide
-                </Typography>
+            Èd
           </Button>
-            </Grid>
-            <Grid item xs={12} md={3}>
-              <Link href='https://pale.o-k-i.net'>
-                <Button
-                  startIcon={<ChatIcon size='large' style={{fontSize: 40}} />}
-                  size='small'
-                  variant='contained'
-                  color='primary'
-                >
-                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                    Palé
-                  </Typography>
-                </Button>
-              </Link>
-            </Grid>
-            <Grid item xs={12} md={3}>
-              <Link href='https://gade.o-k-i.net'>
-                <Button
-                  startIcon={<OndemandVideoIcon size='large' style={{fontSize: 40}} />}
-                  size='small'
-                  variant='contained'
-                  color='primary'
-                >
-                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                    Gadé
-                  </Typography>
-                </Button>
-              </Link>
-            </Grid>
-            <Grid item xs={12} md={3}>
-              <Link href='https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki'>
-                <Button
-                  startIcon={<GroupAddIcon size='large' style={{fontSize: 40}} />}
-                  size='small'
-                  variant='contained'
-                  color='primary'
-                >
-                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                    Adhérer
-                  </Typography>
-                </Button>
-              </Link>
-            </Grid>
+        </Container>
+        <Container style={{marginBlock: '1.5em'}}>
+          <Grid container spacing={3}>
+            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
           </Grid>
         </Container>
         <Carousel