feat: add cover to teks page

components/teks/teks.js

@@ -13,7 +13,10 @@ import slugify from 'slugify'
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 
+import Image from 'next/image'
+
 import {formatJsonString, getAlias} from '../../lib/utils/format'
+import {formatKuveti} from '../../lib/kuveti'
 
 import LicenseModal from '../cc/license-modal'
 import FilesDialog from '../files/files-dialog'
@@ -21,6 +24,8 @@ import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
 import DiferansDialog from './diferans-dialog'
 
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+
 const PREFIX = 'teks'
 
 const classes = {
@@ -126,6 +131,7 @@ export default function Teks({parole}) {
   const isMobile = useMediaQuery('(max-width:600px)')
   const langArray = langToArray(parole)
   const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
+  const coverFmt = formatKuveti(parole.couverture)
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -169,6 +175,17 @@ export default function Teks({parole}) {
           </Box>
         </Typography>
 
+        {coverFmt?.url && (
+          <Box sx={{display: 'flex', justifyContent: 'center', mb: 2}}>
+            <Image
+              src={new URL(coverFmt.url, IMAGE_URL).toString()}
+              alt={parole.titre}
+              width={coverFmt.width || 300}
+              height={coverFmt.height || 300}
+              style={{maxWidth: '100%', maxHeight: 320, width: 'auto', height: 'auto', borderRadius: 8}}
+            />
+          </Box>
+        )}
         {parole?.user && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
             <i>parole soumise par {parole.user.username}</i>