Adapt TeksKat component with new properties

components/teks/teks-kat.js

@@ -14,6 +14,7 @@ import ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 
 const PREFIX = 'teks-kat'
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
 const classes = {
   root: `${PREFIX}-root`,
@@ -30,12 +31,15 @@ const StyledGrid = styled(Grid)({
   }
 })
 
+const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
+
 export default function TeksKat({teks}) {
   const router = useRouter()
-  const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
-  const {tit, awtis, lanne, kouveti, published_at, slug} = teks
-  const datPiblikasyon = format(new Date(published_at), 'P', {locale: fr})
-  const alias = awtis.map(({alias}) => alias)
+  const {attributes} = teks
+  const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
+
+  const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
+  const alias = artistes.data.map(({attributes}) => attributes.alias)
 
   const handleClick = slug => {
     router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
@@ -48,13 +52,13 @@ export default function TeksKat({teks}) {
           <CardMedia
             className={classes.media}
             component='img'
-            alt={tit}
-            image={kouveti ? `${process.env.NEXT_PUBLIC_API_URL}${kouveti.url}` : noImageUrl}
-            title={tit}
+            alt={titre}
+            image={couverture ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
+            title={titre}
           />
           <CardContent>
             <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
-              {tit}
+              {titre}
             </Typography>
             {teks.eksplisit && (
               <ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
@@ -75,7 +79,7 @@ export default function TeksKat({teks}) {
               {new Intl.ListFormat('fr').format(alias)}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
-              {lanne}
+              {annee}
             </Typography>
             <Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
               Publié le : {datPiblikasyon}