pawol.nu/pages/index.js

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 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({kantiteAwtis, kantiteTeks}) {
  const [handleOpen, setHandleOpen] = useState(false)
  const handleClick = () => {
    setHandleOpen(true)
  }

  const kantite = [
    {id: 1, tit: 'Kantité Awtis', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'},
    {id: 2, tit: 'Kantité Tèks', kantite: kantiteTeks, route: '/teks'}
  ]

  const matches = useMediaQuery('(max-width:600px)')

  return (
    <HeadLayout tab={0}>
      <Container align='center'>
        <Image
          alt='Logo #OKi'
          width={384}
          height={220}
          src='/logo-384x220.png'
        />
        <Typography variant='h3' component='h1'>
          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}>
          {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} 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}
        setHandleOpen={setHandleOpen}
      />
    </HeadLayout>
  )
}

Home.propTypes = {
  kantiteAwtis: PropTypes.number.isRequired,
  kantiteTeks: PropTypes.number.isRequired
}

export async function getServerSideProps() {
  const awtisResponse = await axios.get(`${process.env.API_URL}/awtis/count`)
  const teksResponse = await axios.get(`${process.env.API_URL}/teks/count`)
  const kantiteAwtis = awtisResponse.data
  const kantiteTeks = teksResponse.data

  return {
    props: {
      kantiteAwtis,
      kantiteTeks
    }
  }
}