74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
'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/get-alias'
|
||
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
|
||
fill
|
||
priority
|
||
src={`${IMAGE_URL}${fmt.url}`}
|
||
alt={titre}
|
||
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
|
||
}
|