From 0e48e603a335937b55af3e474cd5983e18ce2321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 21 Aug 2021 21:37:09 +0200
Subject: [PATCH] Add soutit to KatKayLa

---
 components/kat-kay-la.js | 8 ++++++--
 pages/index.js           | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/kat-kay-la.js b/components/kat-kay-la.js
index 73cccd9..89e8fa6 100644
--- a/components/kat-kay-la.js
+++ b/components/kat-kay-la.js
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
   }
 })
 
-export default function KatKayLa({tit, kantite, route}) {
+export default function KatKayLa({tit, soutit, kantite, route}) {
   const classes = useStyles()
   const router = useRouter()
 
@@ -36,8 +36,11 @@ export default function KatKayLa({tit, kantite, route}) {
       <Card className={classes.root} variant='outlined'>
         <CardActionArea onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
           <CardContent>
-            <Typography gutterBottom align='center' variant='h3' component='h1'>
+            <Typography style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}} align='center' variant='h3' component='h1'>
               {tit}
+              <Typography style={{marginLeft: 5}} variant='overline'>
+                ({soutit})
+              </Typography>
             </Typography>
             <Typography gutterBottom style={{fontWeight: 'bold'}} align='center' variant='h4' component='h2'>
               {kantite}
@@ -51,6 +54,7 @@ export default function KatKayLa({tit, kantite, route}) {
 
 KatKayLa.propTypes = {
   tit: PropTypes.string.isRequired,
+  soutit: PropTypes.string.isRequired,
   kantite: PropTypes.number.isRequired,
   route: PropTypes.string.isRequired
 }
diff --git a/pages/index.js b/pages/index.js
index 356bee2..0855f7e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -63,8 +63,8 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
   }
 
   const kantite = [
-    {id: 1, tit: 'Kantité Tèks', kantite: kantiteTeks, route: '/teks'},
-    {id: 2, tit: 'Kantité Awtis', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
+    {id: 1, tit: 'Tèks', soutit: 'Texte', kantite: kantiteTeks, route: '/teks'},
+    {id: 2, tit: 'Awtis', soutit: 'Artiste', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
   ]
 
   const matches = useMediaQuery('(max-width:600px)')
@@ -104,7 +104,7 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
         </Container>
         <Container style={{marginBlock: '1.5em'}}>
           <Grid container spacing={3}>
-            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
+            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} soutit={k.soutit} kantite={k.kantite} route={k.route} />)}
           </Grid>
         </Container>
         <Carousel