Adapt components to new mui & nextjs versions

components/teks/teks-kat.js

@@ -1,16 +1,17 @@
+'use client'
+
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {
-  Card,
-  CardActionArea,
-  CardContent,
-  CardMedia,
-  Typography,
-  Grid,
-  Box
-} from '@mui/material'
+import Card from '@mui/material/Card'
+
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Unstable_Grid2'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 import {Peertube} from '@icons-pack/react-simple-icons'
@@ -50,7 +51,7 @@ export default function TeksKat({parole}) {
   }
 
   return (
-    <StyledGrid item xs={12} sm={6} md={4}>
+    <StyledGrid xs={12} sm={6} md={4}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia