Add don button

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'

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'}}>
+        <Container style={{marginBlock: '1em'}}>
+          <Grid container align='center' spacing={2}>
+            <Grid item xs={12}>
               <RezoMenu data={REZO} />
-          </Box>
+            </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}>