Add router to AwtisKat

components/awtis/awtis-kat.js

@@ -1,4 +1,5 @@
 import {useState} from 'react'
+import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
 
@@ -21,6 +22,7 @@ import MizikLis from './mizik-lis'
 import AwtisBiyografi from './awtis-biyografi'
 
 const PREFIX = 'awtis-kat'
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
 
 const classes = {
   root: `${PREFIX}-root`,
@@ -53,10 +55,11 @@ const Kat = styled('div')((
 }))
 
 export default function AwtisKat({anAwtis}) {
+  const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
 
-  const {alias, biyografi, teks, foto} = anAwtis
+  const {alias, biyografi, teks, foto, slug} = anAwtis
 
   const [expanded, setExpanded] = useState(false)
 
@@ -64,15 +67,11 @@ export default function AwtisKat({anAwtis}) {
     setExpanded(!expanded)
   }
 
-  const handleClick = () => {
-    meteEsByografiOuve(true)
-  }
-
   return (
     <Grid item xs={12} sm={6} md={4}>
       <Kat>
         <Card sx={{maxWidth: 340}}>
-          <CardActionArea onClick={handleClick}>
+          <CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>
             <CardMedia
               className={classes.media}
               component='img'