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

'use client'

import PropTypes from 'prop-types'
import Card from '@mui/material/Card'
import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import Image from 'next/image'
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'

// 1×1 gris neutre — placeholder pendant le chargement
const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='

export default function AnVedette({teks}) {
  const {titre, artistes, annee, couverture, slug} = teks
  const aliases = getAlias(artistes, teks.prioriteArtistes)
  const fmt = formatKuveti(couverture, 'medium')

  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}}}>
            {fmt?.url ? (
              <Image
                src={`${IMAGE_URL}${fmt.url}`}
                alt={titre}
                fill
                priority
                placeholder='blur'
                blurDataURL={BLUR_DATA_URL}
                sizes='(max-width: 600px) 100vw, 800px'
                style={{objectFit: 'cover'}}
              />
            ) : (
              <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
            )}
          </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
}