Add soutit to KatKayLa

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
 }

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: 1, tit: 'Tèks', soutit: 'Texte', kantite: kantiteTeks, route: '/teks'},
-    {id: 2, tit: 'Kantité Awtis', kantite: kantiteAwtis, route: '/awtis?paj&paj=1'}
+    {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