Reduce index stats cards

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'>
+    <Grid item xs={12} md={6}>
-      <CardContent>
+      <Card variant='outlined'>
-        <Typography gutterBottom align='center' variant='h6'>
+        <CardContent>
-          <span dangerouslySetInnerHTML={{__html: emoji}} />
+          <Typography gutterBottom align='center' variant='h6'>
-        </Typography>
+            <span dangerouslySetInnerHTML={{__html: emoji}} />
-        <TraductionsStats value={value} total={total} />
+          </Typography>
-      </CardContent>
+          <TraductionsStats value={value} total={total} />
-    </Card>
+        </CardContent>
+      </Card>
+    </Grid>
   )
 }
 

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>