Add Twitter link to index

pages/index.js

@@ -1,11 +1,12 @@
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 import Image from 'next/image'
-import {Button, Container, Grid, Typography, useMediaQuery} from '@material-ui/core'
+import {Box, Button, Container, Grid, Link, Typography, useMediaQuery} from '@material-ui/core'
 import {makeStyles} from '@material-ui/core/styles'
 import HelpIcon from '@material-ui/icons/Help'
 import GroupIcon from '@material-ui/icons/Group'
 import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import TwitterIcon from '@material-ui/icons/Twitter'
 import {Pleroma, Peertube, Nextcloud} from '@icons-pack/react-simple-icons'
 
 import KatKayLa from '../components/kat-kay-la'
@@ -52,6 +53,8 @@ const REZO = [
   }
 ]
 
+const twitterUrl = `https://twitter.com/${process.env.NEXT_PUBLIC_TWITTER_USERNAME || ''}`
+
 export default function Home({kantiteAwtis, kantiteTeks}) {
   const classes = useStyles()
   const [handleOpen, setHandleOpen] = useState(false)
@@ -80,20 +83,32 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
             Organisation KA Internationale
           </Typography>
         </Container>
-        <Container className={classes.root} align='center'>
-          <RezoMenu data={REZO} />
-          <Button
-            startIcon={<HelpIcon style={{fontSize: 25}} />}
-            size='large'
-            variant='contained'
-            color='primary'
-            onClick={handleClick}
-          >
-            Èd
-          </Button>
-        </Container>
-        <Container align='center'>
-          <JwennSesyon />
+        <Container className={classes.root} style={{display: 'flex', justifyContent: 'center'}} align='center'>
+          <Box style={{display: 'flex', flexDirection: 'column'}}>
+            <RezoMenu data={REZO} />
+            <JwennSesyon />
+          </Box>
+          <Box style={{display: 'flex', flexDirection: 'column'}}>
+            <Button
+              startIcon={<HelpIcon style={{fontSize: 25}} />}
+              size='large'
+              variant='contained'
+              color='primary'
+              onClick={handleClick}
+            >
+              Èd
+            </Button>
+            <Link target='_blank' rel='noopener noreferrer' href={twitterUrl}>
+              <Button style={{marginTop: 10}} variant='outlined' color='primary'>
+                <Box paddingTop={1}>
+                  <TwitterIcon style={{fontSize: 55}} />
+                  <Typography style={{fontWeight: 'bold'}} variant='h6' component='h1'>
+                    Twitter
+                  </Typography>
+                </Box>
+              </Button>
+            </Link>
+          </Box>
         </Container>
         <Container style={{marginBlock: '1.5em'}}>
           <Grid container spacing={3}>