Add KatKayLa & change index

pages/index.js

@@ -1,21 +1,66 @@
 import {useState} from 'react'
-import {Button, useMediaQuery} from '@material-ui/core'
+import PropTypes from 'prop-types'
+import Image from 'next/image'
+import {Button, Container, Grid, Typography, useMediaQuery, Link} from '@material-ui/core'
 import axios from 'axios'
+import TouchAppIcon from '@material-ui/icons/TouchApp'
 
+import KatKayLa from '../components/kat-kay-la'
 import HeadLayout from '../components/head-layout'
 import Carousel from '../components/carousel'
 
-export default function Home() {
+export default function Home({konbyenAwtis, konbyenTeks}) {
   const [handleOpen, setHandleOpen] = useState(false)
   const handleClick = () => {
     setHandleOpen(true)
   }
 
+  const kombyen = [
+    {id: 1, tit: 'Konbyen Awtis', kombyen: konbyenAwtis, route: '/awtis?paj&paj=1'},
+    {id: 2, tit: 'Konbyen Tèks', kombyen: konbyenTeks, route: '/teks'}
+  ]
+
   const matches = useMediaQuery('(max-width:600px)')
 
   return (
     <HeadLayout tab={0}>
-      <Button onClick={handleClick}>Open carousel</Button>
+      <Container align='center'>
+        <Image
+          alt='Logo #OKi'
+          width={400}
+          height={215}
+          src='/logo.png'
+        />
+        <Typography variant='h3'>
+          Organisation KA Internationale
+        </Typography>
+        <Typography variant='h4' component='h2' color='textSecondary'>
+          Transcriptions et traductions
+        </Typography>
+        <Typography variant='h5' component='h2'>
+          <Link href='mailto:kontak@o-k-i.net'>
+            kontak@o-k-i.net
+          </Link>
+        </Typography>
+      </Container>
+      <Container style={{marginTop: '5em'}}>
+        <Grid container spacing={3}>
+          {kombyen.map(k => <KatKayLa key={k.id} tit={k.tit} kombyen={k.kombyen} route={k.route} />)}
+        </Grid>
+      </Container>
+      <Container style={{marginTop: '5em', marginBottom: '5em'}} align='center'>
+        <Button
+          startIcon={<TouchAppIcon size='large' style={{fontSize: 50}} />}
+          size='large'
+          variant='contained'
+          color='primary'
+          onClick={handleClick}
+        >
+          <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
+            Guide
+          </Typography>
+        </Button>
+      </Container>
       <Carousel
         isMobile={matches}
         handleOpen={handleOpen}
@@ -25,16 +70,21 @@ export default function Home() {
   )
 }
 
+Home.propTypes = {
+  konbyenAwtis: PropTypes.number.isRequired,
+  konbyenTeks: PropTypes.number.isRequired
+}
+
 export async function getServerSideProps() {
-  const mizikResponse = await axios.get(`${process.env.API_URL}/mizik`)
-  const awtisResponse = await axios.get(`${process.env.API_URL}/awtis`)
-  const mizik = mizikResponse.data
-  const awtis = awtisResponse.data
+  const awtisResponse = await axios.get(`${process.env.API_URL}/awtis/count`)
+  const mizikResponse = await axios.get(`${process.env.API_URL}/mizik/count`)
+  const konbyenAwtis = awtisResponse.data
+  const konbyenTeks = mizikResponse.data
 
   return {
     props: {
-      mizik,
-      awtis
+      konbyenAwtis,
+      konbyenTeks
     }
   }
 }