Cédric FAMIBELLE-PRONZOLA
126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import Image from 'next/image'
|
|
import {Container, Grid, Typography, Button} from '@mui/material'
|
|
import GroupIcon from '@mui/icons-material/Group'
|
|
import MusicNoteIcon from '@mui/icons-material/MusicNote'
|
|
import {Pleroma, Peertube, Paypal} from '@icons-pack/react-simple-icons'
|
|
import TelegramIcon from '@mui/icons-material/Telegram'
|
|
import TwitterIcon from '@mui/icons-material/Twitter'
|
|
|
|
import KatKayLa from '../components/kat-kay-la'
|
|
import HeadLayout from '../components/head-layout'
|
|
import Footer from '../components/footer'
|
|
import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'
|
|
import RezoMenu from '../components/rezo-menu'
|
|
|
|
import okiLogo from '../public/logo-192x110.png'
|
|
|
|
const TELEGRAM_GROUP = process.env.NEXT_PUBLIC_TELEGRAM_GROUP || 'OrganisationKA'
|
|
const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
|
|
const PAYPAL_DONATE_ID = process.env.NEXT_PUBLIC_PAYPAL_ADDRESS || '5Q3KPR79CAZVW'
|
|
|
|
const REZO = [
|
|
{
|
|
id: 'twitter',
|
|
tit: 'Twitter',
|
|
icon: <TwitterIcon />,
|
|
link: `https://twitter.com/${TWITTER_USERNAME}`
|
|
},
|
|
{
|
|
id: 'telegram',
|
|
tit: 'Telegram',
|
|
icon: <TelegramIcon />,
|
|
link: `https://t.me/${TELEGRAM_GROUP}`
|
|
},
|
|
{
|
|
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 kantite = [
|
|
{id: 1, tit: 'Tèks', soutit: 'Texte', kantite: kantiteTeks, route: '/teks'},
|
|
{id: 2, tit: 'Awtis', soutit: 'Artiste', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
|
|
]
|
|
|
|
return (
|
|
<HeadLayout tab={0}>
|
|
<div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
|
<Container align='center'>
|
|
<Image
|
|
alt='Logo #OKi'
|
|
width={192}
|
|
height={110}
|
|
src={okiLogo}
|
|
placeholder='blur'
|
|
/>
|
|
<Typography variant='h6' component='h1'>
|
|
Organisation KA Internationale
|
|
</Typography>
|
|
</Container>
|
|
<Container style={{marginBlock: '1em'}}>
|
|
<Grid container align='center' spacing={2}>
|
|
<Grid item xs={12}>
|
|
<RezoMenu data={REZO} />
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Button
|
|
size='small'
|
|
variant='contained'
|
|
color='primary'
|
|
startIcon={<Paypal size={20} />}
|
|
onClick={() => window.open(`https://www.paypal.com/donate?hosted_button_id=${PAYPAL_DONATE_ID}`, '_blank')}
|
|
>
|
|
Don
|
|
</Button>
|
|
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
<Container style={{marginBlock: '1em'}}>
|
|
<Grid container spacing={3}>
|
|
{kantite.map(k => <KatKayLa key={k.id} tit={k.tit} soutit={k.soutit} kantite={k.kantite} route={k.route} />)}
|
|
</Grid>
|
|
</Container>
|
|
<Footer />
|
|
</div>
|
|
</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
|
|
}
|
|
}
|
|
}
|