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
 }