pawol.nu/components/akey/an-vedette.js

'use client'

import {useState} from 'react'
import PropTypes from 'prop-types'
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 Skeleton from '@mui/material/Skeleton'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import Link from 'next/link'

import {getAlias} from '../../lib/utils/format'
import {formatKuveti} from '../../lib/kuveti'

const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const noImageUrl = 'https://place-hold.it/600x600?text=Indisponible'

export default function AnVedette({teks}) {
  const [imageLoaded, setImageLoaded] = useState(false)
  const {titre, artistes, annee, couverture, slug} = teks
  const aliases = getAlias(artistes, teks.prioriteArtistes)
  const fmt = formatKuveti(couverture)
  const imageUrl = fmt?.url ? `${IMAGE_URL}${fmt.url}` : noImageUrl

  return (
    <Box sx={{mb: 4}}>
      <Chip
        label='NEW RELEASE'
        size='small'
        color='primary'
        sx={{mb: 1.5, fontWeight: 'bold', letterSpacing: 1}}
      />
      <Card sx={{borderRadius: 2, overflow: 'hidden'}}>
        <CardActionArea component={Link} href={`/paroles/${slug}`}>
          <Box sx={{position: 'relative', width: '100%', aspectRatio: {xs: '1 / 1', sm: '16 / 9'}, maxHeight: {sm: 420}}}>
            {!imageLoaded && (
              <Skeleton
                variant='rectangular'
                animation='wave'
                sx={{position: 'absolute', inset: 0, width: '100%', height: '100%'}}
              />
            )}
            <CardMedia
              component='img'
              image={imageUrl}
              alt={titre}
              fetchPriority='high'
              onLoad={() => setImageLoaded(true)}
              sx={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
            />
          </Box>
          <CardContent>
            <Typography variant='h5' component='h2' sx={{fontWeight: 'bold', mb: 0.5}}>
              {titre}
            </Typography>
            <Typography variant='body1' color='text.secondary'>
              {aliases}
            </Typography>
            {annee && (
              <Typography variant='body2' color='text.secondary'>
                {annee}
              </Typography>
            )}
          </CardContent>
        </CardActionArea>
      </Card>
    </Box>
  )
}

AnVedette.propTypes = {
  teks: PropTypes.object.isRequired
}