feat: add vignettes

src/app/communes/formation-en-ligne/page.tsx

@@ -1,64 +1,66 @@
 import CardWrapper from '@/components/CardWrapper'
 import EventCard from '@/components/Events/EventCard'
 import Section from '@/components/Section'
-import SectionTilesList from '@/components/SectionTilesList'
+import VideoMiniature from '@/components/VideoMiniature'
 import { getBalEvents } from '@/lib/api-bal-admin'
 import { getUpcomingAndPassedEvents, mapEvents } from '@/utils/events'
 
 const videoFormations = [
   {
     title: 'Épisode 1 : Introduction',
-    picto: '/img/picto-fr/video.svg',
+    image: '/img/formations-en-ligne/e1.png',
     link: {
       href: 'https://peertube.adresse.data.gouv.fr/w/toyKNe4rKyVD7mUovsWLKd',
       target: '_blank',
     },
-    tags: ['Base adresse locale'],
   },
   {
     title: 'Épisode 2 : Création',
-    picto: '/img/picto-fr/video.svg',
+    image: '/img/formations-en-ligne/e2.png',
     link: {
       href: 'https://peertube.adresse.data.gouv.fr/w/aNEtMh7fJCzsAPoGkwvFSg',
       target: '_blank',
     },
-    tags: ['Base adresse locale'],
   },
   {
     title: 'Épisode 3 : Voies',
-    picto: '/img/picto-fr/video.svg',
+    image: '/img/formations-en-ligne/e3.png',
     link: {
       href: 'https://peertube.adresse.data.gouv.fr/w/rgksUPigy8KWnmx8WFELDN',
       target: '_blank',
     },
-    tags: ['Base adresse locale'],
   },
   {
     title: 'Épisode 4 : Numéros',
-    picto: '/img/picto-fr/video.svg',
+    image: '/img/formations-en-ligne/e4.png',
     link: {
       href: 'https://peertube.adresse.data.gouv.fr/w/un73nNp4kQofNkhT38D6YQ',
       target: '_blank',
     },
-    tags: ['Base adresse locale'],
   },
   {
     title: 'Épisode 5 : Lieux-dits',
-    picto: '/img/picto-fr/video.svg',
+    image: '/img/formations-en-ligne/e5.png',
     link: {
       href: 'https://peertube.adresse.data.gouv.fr/w/ttnYNTcXtcubCHQX8kHdGt',
       target: '_blank',
     },
-    tags: ['Base adresse locale'],
   },
   {
     title: 'Épisode 6 : Publication',
-    picto: '/img/picto-fr/video.svg',
+    image: '/img/formations-en-ligne/e6.png',
     link: {
       href: 'https://peertube.adresse.data.gouv.fr/w/4uU6AHpTe7coPyhskBSANB',
       target: '_blank',
     },
-    tags: ['Base adresse locale'],
+  },
+  {
+    title: 'Épisode 7 : Récupération',
+    image: '/img/formations-en-ligne/e7.png',
+    link: {
+      href: 'https://peertube.adresse.data.gouv.fr/w/fdD1tzvPfktHkkVK8p7h5D',
+      target: '_blank',
+    },
   },
 ]
 
@@ -81,7 +83,13 @@ export default async function FormationEnLignePage() {
           ))}
         </CardWrapper>
       </Section>
-      <SectionTilesList title="Vidéos des formations" data={videoFormations} />
+      <Section title="Vidéos des formations">
+        <CardWrapper isSmallCard>
+          {videoFormations.map((video, index) => (
+            <VideoMiniature key={index} {...video} />
+          ))}
+        </CardWrapper>
+      </Section>
     </>
   )
 }

src/components/Events/EventCard.styles.ts

@@ -22,4 +22,10 @@ export const StyledEventCard = styled.div<{ isPassed?: boolean }>`
     h3 {
         font-size: 1.5rem;
     }
+
+    .fr-btn {
+        &::after {
+            display: none;
+        }
+    }
 `

src/components/VideoMiniature/VideoMiniature.styles.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const StyledWrapper = styled.a`
+    margin: 10px;
+    h3 {
+        font-size: 0.9rem;
+        font-weight: bold;
+        margin: 0;
+    }
+
+    &::after {
+        display: none;
+    }
+`

src/components/VideoMiniature/VideoMiniature.tsx

@@ -0,0 +1,20 @@
+import ResponsiveImage from '../ResponsiveImage'
+import { StyledWrapper } from './VideoMiniature.styles'
+
+interface VideoMiniatureProps {
+  title: string
+  image: string
+  link: {
+    href: string
+    target: string
+  }
+}
+
+export default function VideoMiniature({ title, image, link }: VideoMiniatureProps) {
+  return (
+    <StyledWrapper href={link.href} target={link.target}>
+      <ResponsiveImage src={image} alt={title} />
+      <h3>{title}</h3>
+    </StyledWrapper>
+  )
+}

src/components/VideoMiniature/index.tsx

@@ -0,0 +1 @@
+export { default } from './VideoMiniature'