91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
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 TouchAppIcon from '@material-ui/icons/TouchApp'
|
|
|
|
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='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 jwennAwtisKantite()
|
|
const teksResponse = await jwennTeksKantite()
|
|
const kantiteAwtis = awtisResponse
|
|
const kantiteTeks = teksResponse
|
|
|
|
return {
|
|
props: {
|
|
kantiteAwtis,
|
|
kantiteTeks
|
|
}
|
|
}
|
|
}
|