Adapt KatKay-La component

components/kat-kay-la.js

@@ -1,33 +1,50 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 import {
-  Grid,
-  Box
+  Card,
+  CardContent,
+  CardActionArea,
+  Typography,
+  Grid
 } from '@mui/material'
+import {styled} from '@mui/material/styles'
 
-export default function KatKayLa({tit, kantite, route}) {
+const PREFIX = 'kat-kay-la'
+
+const classes = {
+  root: `${PREFIX}-root`,
+}
+
+const StyledGrid = styled(Grid)({
+  [`& .${classes.root}`]: {
+    minWidth: 275
+  },
+})
+
+export default function KatKayLa({tit, kantite, href, as}) {
   const router = useRouter()
 
   return (
-    <Grid item sx={{marginTop: 1}}>
-      <Box sx={{
-        width: 100,
-        padding: 1,
-        border: '1px solid rgba(76, 175, 80, 0.5)',
-        color: 'rgb(76, 175, 80)',
-        borderRadius: '4px',
-        textAlign: 'center',
-        cursor: 'pointer'
-      }} onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}
-      >
-        {kantite} <br /> {tit}
-      </Box>
-    </Grid>
+    <StyledGrid item xs={12} md={6}>
+      <Card className={classes.root} variant='outlined'>
+        <CardActionArea onClick={() => router.push(href, as).then(() => window.scrollTo(0, 0))}>
+          <CardContent>
+            <Typography style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}} align='center' variant='h4' component='h1'>
+              {tit}
+            </Typography>
+            <Typography gutterBottom style={{fontWeight: 'bold'}} align='center' variant='h5' component='h2'>
+              {kantite}
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </StyledGrid>
   )
 }
 
 KatKayLa.propTypes = {
   tit: PropTypes.string.isRequired,
   kantite: PropTypes.number.isRequired,
-  route: PropTypes.string.isRequired
+  href: PropTypes.string.isRequired,
+  as: PropTypes.string.isRequired
 }