From 909d51b10bfef3bdbd7a3633f64dc507bb98a067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 2 Oct 2021 13:45:14 +0200
Subject: [PATCH] Add don button

---
 components/rezo-menu.js |  2 +-
 pages/index.js          | 37 +++++++++++++++++++++----------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/components/rezo-menu.js b/components/rezo-menu.js
index 1bfec3f..bbdeee6 100644
--- a/components/rezo-menu.js
+++ b/components/rezo-menu.js
@@ -61,7 +61,7 @@ export default function RezoMenu({data}) {
       <Button
         ref={anchorRef}
         startIcon={<PublicIcon />}
-        size='large'
+        size='small'
         aria-controls='customized-menu'
         aria-haspopup='true'
         variant='contained'
diff --git a/pages/index.js b/pages/index.js
index 86ffc52..c07516e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import Image from 'next/image'
-import {Box, Container, Grid, Typography} from '@material-ui/core'
+import {Box, Container, Grid, Typography, Button} from '@material-ui/core'
 import {makeStyles} from '@material-ui/core/styles'
 import GroupIcon from '@material-ui/icons/Group'
 import MusicNoteIcon from '@material-ui/icons/MusicNote'
-import {Pleroma, Peertube} from '@icons-pack/react-simple-icons'
+import {Pleroma, Peertube, Paypal} from '@icons-pack/react-simple-icons'
 import TelegramIcon from '@material-ui/icons/Telegram'
 import TwitterIcon from '@material-ui/icons/Twitter'
 
@@ -18,14 +18,7 @@ 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 useStyles = makeStyles(theme => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1.2)
-    }
-  }
-}))
+const PAYPAL_DONATE_ID = process.env.NEXT_PUBLIC_PAYPAL_ADDRESS || '5Q3KPR79CAZVW'
 
 const REZO = [
   {
@@ -63,8 +56,6 @@ const REZO = [
 ]
 
 export default function Home({kantiteAwtis, kantiteTeks}) {
-  const classes = useStyles()
-
   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'}
@@ -85,10 +76,24 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
             Organisation KA Internationale
           </Typography>
         </Container>
-        <Container className={classes.root} style={{display: 'flex', justifyContent: 'center'}} align='center'>
-          <Box style={{display: 'flex', flexDirection: 'column'}}>
-            <RezoMenu data={REZO} />
-          </Box>
+        <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 />}
+                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}>