Replace KatKayLa by KatAkey

components/akey/kat-akey.js

@@ -1,18 +1,22 @@
+'use client'
+
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
-import Grid from '@mui/material/Grid'
+import {useTheme} from '@mui/material/styles'
+import Grid from '@mui/material/Unstable_Grid2'
 import Card from '@mui/material/Card'
 import CardActionArea from '@mui/material/CardActionArea'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
 
-export default function KatKayLa({tit, kantite, href, as}) {
+export default function KatAkey({tit, kantite, href, as}) {
-  const router = useRouter()
+  const theme = useTheme()
+  const rute = useRouter()
 
   return (
-    <Grid item xs={12} md={6}>
+    <Grid xs={12} md={6}>
-      <Card variant='outlined'>
+      <Card sx={{borderColor: theme.palette.primary[theme.palette.mode]}} color='primary' variant='outlined'>
-        <CardActionArea onClick={() => router.push(href, as).then(() => window.scrollTo(0, 0))}>
+        <CardActionArea onClick={() => rute.push(href, as)}>
           <CardContent>
             <Typography style={{fontWeight: 'bold'}} align='center' variant='h5' component='h4'>
               {kantite}
@@ -27,7 +31,7 @@ export default function KatKayLa({tit, kantite, href, as}) {
   )
 }
 
-KatKayLa.propTypes = {
+KatAkey.propTypes = {
   tit: PropTypes.string.isRequired,
   kantite: PropTypes.number.isRequired,
   href: PropTypes.string.isRequired,