feat: add AnVedette component

2026-06-08 21:46:18 +04:00
parent c113a2547f
commit ca9ba4cb10
2 changed files with 73 additions and 4 deletions
@@ -0,0 +1,67 @@
+'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 CardMedia from '@mui/material/CardMedia'
+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 {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='À LA UNE'
+        size='small'
+        color='primary'
+        sx={{mb: 1.5, fontWeight: 'bold', letterSpacing: 1}}
+      />
+      <Card sx={{borderRadius: 2, overflow: 'hidden'}}>
+        <CardActionArea component={Link} href={`/paroles/${slug}`}>
+          <CardMedia
+            component='img'
+            image={imageUrl}
+            alt={titre}
+            sx={{
+              width: '100%',
+              aspectRatio: {xs: '1 / 1', sm: '16 / 9'},
+              objectFit: 'cover',
+              maxHeight: {sm: 420}
+            }}
+          />
+          <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
+}