feat: add AnVedette component

app/page.js

@@ -1,32 +1,34 @@
 import Box from '@mui/material/Box'
 import Container from '@mui/material/Container'
 import {notFound} from 'next/navigation'
-import {jwennStats} from '../lib/oki-api'
+import {jwennStats, jwennDenyeTeks} from '../lib/oki-api'
 
 import Statistik from '../components/akey/statistik'
 import Akey from '../components/akey'
+import AnVedette from '../components/akey/an-vedette'
 
 import okiLogo from '../public/logo-512x512.png'
 import Footer from '../components/footer'
 import Aso from '../components/akey/aso'
 
 async function jwennDone() {
-  const statistik = await jwennStats()
+  const [statistik, denyeTeks] = await Promise.all([jwennStats(), jwennDenyeTeks()])
 
   if (!statistik) {
     notFound()
   }
 
-  return statistik
+  return {statistik, dernierTeks: denyeTeks?.[0]}
 }
 
 export default async function Page() {
-  const statistik = await jwennDone()
+  const {statistik, dernierTeks} = await jwennDone()
 
   return (
     <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
       <Akey logo={okiLogo} />
       <Container sx={{flexGrow: 100}}>
+        {dernierTeks && <AnVedette teks={dernierTeks} />}
         <Statistik statistik={statistik} />
         <Aso />
       </Container>

components/akey/an-vedette.js

@@ -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
+}