Adapt components to new mui & nextjs versions

components/teks/denye-teks.js

@@ -1,5 +1,9 @@
+'use client'
+
 import PropTypes from 'prop-types'
-import {Container, Grid, Typography} from '@mui/material'
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
 
 import {styled} from '@mui/material/styles'
 

components/teks/entegre-mizik.js

@@ -1,6 +1,8 @@
+'use client'
+
 import {Box, IconButton} from '@mui/material'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 
 import {
   Tidal,

components/teks/lekte.js

@@ -1,3 +1,5 @@
+'use client'
+
 import {useState, useEffect, useRef} from 'react'
 import PropTypes from 'prop-types'
 import {styled, useTheme} from '@mui/material/styles'

components/teks/pataje.js

@@ -1,3 +1,5 @@
+'use client'
+
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 

components/teks/teks-drawer.js

@@ -1,5 +1,6 @@
 import {useEffect, useState, useContext} from 'react'
 import Link from 'next/link'
+import {useParams} from 'next/navigation'
 import PropTypes from 'prop-types'
 import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'

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

components/teks/teks.js

@@ -1,16 +1,14 @@
-import {forwardRef} from 'react'
+'use client'
+
+import {useEffect} from 'react'
 import PropTypes from 'prop-types'
-import {
-  Box,
-  Grid,
-  Snackbar,
-  Typography,
-  Tooltip,
-  Zoom,
-  useMediaQuery
-} from '@mui/material'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
+import Tooltip from '@mui/material/Tooltip'
+import {useMediaQuery} from '@mui/material'
+
 import {styled} from '@mui/material/styles'
-import MuiAlert from '@mui/material/Alert'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {formatJsonString, getAlias} from '../../lib/utils/format'