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,
+  Card,
-  Box
+  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}}>
+    <StyledGrid item xs={12} md={6}>
-      <Box sx={{
+      <Card className={classes.root} variant='outlined'>
-        width: 100,
+        <CardActionArea onClick={() => router.push(href, as).then(() => window.scrollTo(0, 0))}>
-        padding: 1,
+          <CardContent>
-        border: '1px solid rgba(76, 175, 80, 0.5)',
+            <Typography style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}} align='center' variant='h4' component='h1'>
-        color: 'rgb(76, 175, 80)',
+              {tit}
-        borderRadius: '4px',
+            </Typography>
-        textAlign: 'center',
+            <Typography gutterBottom style={{fontWeight: 'bold'}} align='center' variant='h5' component='h2'>
-        cursor: 'pointer'
+              {kantite}
-      }} onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}
+            </Typography>
-      >
+          </CardContent>
-        {kantite} <br /> {tit}
+        </CardActionArea>
-      </Box>
+      </Card>
-    </Grid>
+    </StyledGrid>
   )
 }
 
 KatKayLa.propTypes = {
   tit: PropTypes.string.isRequired,
   kantite: PropTypes.number.isRequired,
-  route: PropTypes.string.isRequired
+  href: PropTypes.string.isRequired,
+  as: PropTypes.string.isRequired
 }