Replace card by button in index

components/kat-kay-la.js

@@ -1,67 +1,24 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 import {
-  Card,
-  CardContent,
-  CardActionArea,
-  Typography,
-  Grid
+  Grid,
+  Button
 } from '@mui/material'
-import {styled} from '@mui/material/styles'
 
-const PREFIX = 'kat-kay-la'
-
-const classes = {
-  root: `${PREFIX}-root`,
-  bullet: `${PREFIX}-bullet`,
-  title: `${PREFIX}-title`,
-  pos: `${PREFIX}-pos`
-}
-
-const StyledGrid = styled(Grid)({
-  [`& .${classes.root}`]: {
-    minWidth: 275
-  },
-  [`& .${classes.bullet}`]: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)'
-  },
-  [`& .${classes.title}`]: {
-    fontSize: 14
-  },
-  [`& .${classes.pos}`]: {
-    marginBottom: 12
-  }
-})
-
-export default function KatKayLa({tit, soutit, kantite, route}) {
+export default function KatKayLa({tit, kantite, route}) {
   const router = useRouter()
 
   return (
-    <StyledGrid item xs={12} md={6}>
-      <Card className={classes.root} variant='outlined'>
-        <CardActionArea onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
-          <CardContent>
-            <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}
-            </Typography>
-          </CardContent>
-        </CardActionArea>
-      </Card>
-    </StyledGrid>
+    <Grid item sx={{marginTop: 1}}>
+      <Button sx={{width: 100}} variant='outlined' onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
+        {kantite} <br /> {tit}
+      </Button>
+    </Grid>
   )
 }
 
 KatKayLa.propTypes = {
   tit: PropTypes.string.isRequired,
-  soutit: PropTypes.string.isRequired,
   kantite: PropTypes.number.isRequired,
   route: PropTypes.string.isRequired
 }