From c6d4b5a08d9f2bf869fb7bd5c6f454fb3b80e93b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Thu, 2 Jun 2022 07:41:38 +0400
Subject: [PATCH] Reduce index stats cards

---
 components/stats/kat-stats.js | 20 ++++++++++++--------
 pages/index.js                |  4 ++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/stats/kat-stats.js b/components/stats/kat-stats.js
index b8a1ef7..f8d4d2d 100644
--- a/components/stats/kat-stats.js
+++ b/components/stats/kat-stats.js
@@ -2,18 +2,22 @@ import PropTypes from 'prop-types'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
+
 import TraductionsStats from './traductions-stats'
 
 export default function KatStats({emoji, value, total}) {
   return (
-    <Card sx={{marginBottom: 2}} variant='outlined'>
-      <CardContent>
-        <Typography gutterBottom align='center' variant='h6'>
-          <span dangerouslySetInnerHTML={{__html: emoji}} />
-        </Typography>
-        <TraductionsStats value={value} total={total} />
-      </CardContent>
-    </Card>
+    <Grid item xs={12} md={6}>
+      <Card variant='outlined'>
+        <CardContent>
+          <Typography gutterBottom align='center' variant='h6'>
+            <span dangerouslySetInnerHTML={{__html: emoji}} />
+          </Typography>
+          <TraductionsStats value={value} total={total} />
+        </CardContent>
+      </Card>
+    </Grid>
   )
 }
 
diff --git a/pages/index.js b/pages/index.js
index adcc3ac..59873ee 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -80,11 +80,11 @@ export default function Home({errorCode, errorMessage, stats}) {
             <KatKayLa tit='Paroles' kantite={stats.countParole} href='/paroles' as='/paroles' />
             <KatKayLa tit='Artistes' kantite={stats.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
           </Grid>
-          <Box marginBottom={3}>
+          <Grid container spacing={2} marginBottom={3}>
             {statsByLang.map(({code, value, emoji}) => (
               <KatStats key={code} emoji={emoji} value={value} total={stats.countParole} />
             ))}
-          </Box>
+          </Grid>
         </Container>
         <Footer />
       </Box>