Use KatStats component

pages/index.js

@@ -12,6 +12,7 @@ import Footer from '../components/footer'
 import RezoDialog from '../components/rezo/rezo-dialog'
 import {jwennStats} from '../lib/oki-api'
 
+import KatStats from '../components/stats/kat-stats'
 import KatKayLa from '../components/kat-kay-la'
 
 import Custom500 from './500'
@@ -22,6 +23,36 @@ export default function Home({errorCode, errorMessage, stats}) {
     return <Custom500 statusCode={errorCode} />
   }
 
+  const {parolesWithoutTranslation} = stats
+
+  const statsByLang = [
+    {
+      code: 'fr',
+      value: parolesWithoutTranslation.francais,
+      emoji: '&#127467;&#127479;'
+    },
+    {
+      code: 'en',
+      value: parolesWithoutTranslation.anglais,
+      emoji: '&#127468;&#127463;'
+    },
+    {
+      code: 'es',
+      value: parolesWithoutTranslation.espagnol,
+      emoji: '&#127466;&#127480;'
+    },
+    {
+      code: 'de',
+      value: parolesWithoutTranslation.allemand,
+      emoji: '&#127465;&#127466;'
+    },
+    {
+      code: 'it',
+      value: parolesWithoutTranslation.italien,
+      emoji: '&#127470;&#127481;'
+    }
+  ]
+
   return (
     <HeadLayout tab={0}>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
@@ -49,6 +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}>
+            {statsByLang.map(({code, value, emoji}) => (
+              <KatStats key={code} emoji={emoji} value={value} total={stats.countParole} />
+            ))}
+          </Box>
         </Container>
         <Footer />
       </Box>