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 HelpIcon from '@material-ui/icons/Help'
import ChatIcon from '@material-ui/icons/Chat'
import GroupAddIcon from '@material-ui/icons/GroupAdd'

import KatKayLa from '../components/kat-kay-la'
import HeadLayout from '../components/head-layout'
import Carousel from '../components/carousel'
import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'

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='h4' component='h1'>
          Organisation KA Internationale
        </Typography>
      </Container>
      <Container style={{marginTop: '1.5em'}} align='center'>
        <Grid container spacing={3}>
          <Grid item xs={12} md={4}>
            <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={4}>
            <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>
          <Grid item xs={12} md={4}>
            <Button
              startIcon={<HelpIcon size='large' style={{fontSize: 40}} />}
              size='small'
              variant='contained'
              color='primary'
              onClick={handleClick}
            >
              <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
                Guide
              </Typography>
            </Button>
          </Grid>
        </Grid>
      </Container>
      <Container style={{marginTop: '3em'}}>
        <Grid container spacing={3}>
          {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
        </Grid>
      </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 jwennAwtisKantite()
  const teksResponse = await jwennTeksKantite()
  const kantiteAwtis = awtisResponse
  const kantiteTeks = teksResponse

  return {
    props: {
      kantiteAwtis,
      kantiteTeks
    }
  }
}