Adapt components to new mui & nextjs versions

components/awtis/awtis-detay.js

@@ -1,7 +1,18 @@
+'use client'
+
 import {useState} from 'react'
+import Link from 'next/link'
 import PropTypes from 'prop-types'
-import {Accordion, AccordionDetails, AccordionSummary, Box, Button, CardActionArea, Chip, Container, Grid, Paper} from '@mui/material'
-import {useRouter} from 'next/router'
+import Accordion from '@mui/material/Accordion'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import CardActionArea from '@mui/material/CardActionArea'
+import Chip from '@mui/material/Chip'
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Unstable_Grid2'
+import Paper from '@mui/material/Paper'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Avatar from '@mui/material/Avatar'

components/awtis/awtis-kat.js

@@ -1,19 +1,15 @@
-import {useState} from 'react'
-import {useRouter} from 'next/router'
-import PropTypes from 'prop-types'
-import clsx from 'clsx'
+'use client'
 
-import {
-  CardActionArea,
-  Grid,
-  Card,
-  CardContent,
-  CardMedia,
-  CardActions,
-  Collapse,
-  IconButton,
-  Typography
-} from '@mui/material'
+import {useState} from 'react'
+import {useRouter} from 'next/navigation'
+import PropTypes from 'prop-types'
+
+import CardActionArea from '@mui/material/CardActionArea'
+import Grid from '@mui/material/Unstable_Grid2'
+import Card from '@mui/material/Card'
+import CardMedia from '@mui/material/CardMedia'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {styled} from '@mui/material/styles'

components/awtis/cheche-awtis.js

@@ -1,5 +1,7 @@
+'use client'
+
 import {useEffect, useState} from 'react'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import TextField from '@mui/material/TextField'
 import Autocomplete from '@mui/material/Autocomplete'
 import Avatar from '@mui/material/Avatar'

components/awtis/mizik-badj-meni.js

@@ -1,5 +1,5 @@
 import {useRef, useEffect, useState} from 'react'
-import {useRouter} from 'next/router'
+import {useRouter} from 'next/navigation'
 import PropTypes from 'prop-types'
 
 import {