dynamize inspirations header

src/components/inspirations/Header.vue

@@ -1,27 +1,41 @@
 <template>
   <header
     class="flex | text-center"
-    style="
-      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-    "
+    :style="'--image: url(\'' + collection.cover + '\');'"
   >
     <!-- $inspiration->cover()->url() -->
-    <h2 class="inspiration__title | font-serif | text-lg | new">
-      Shape of Nature
+    <h2
+      class="inspiration__title | font-serif | text-lg"
+      :class="{ new: collection.new }"
+    >
+      {{ collection.title }}
     </h2>
     <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
-    <time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
-      >Avril 2024</time
+    <time
+      class="inspiration__date | font-medium | text-sm"
+      datatime="2024-04"
+      >{{ frenchFormattedDate }}</time
     >
     <!-- $inspiration->date() -->
     <p class="inspiration__description">
-      Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
-      consequat porta mauris hendrerit malesuada viverra turpis.
+      {{ collection.description }}
     </p>
-    <!-- $inspiration->description() -->
   </header>
 </template>
 
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+const { collection } = defineProps({
+  collection: Object,
+});
+
+dayjs.locale("fr");
+
+const frenchFormattedDate = dayjs(collection.date).format("MMMM YYYY");
+</script>
+
 <style scoped>
 .inspiration > header {
   --direction: column;