From 20a836dc6ef021d261bae4ebb65618d9f97c9fb0 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Fri, 20 Dec 2024 11:46:30 +0100
Subject: [PATCH] fix: make the entire PhysicalSample card clickable and format
 date

close #74
---
 src/components/project/cards/PhysicalSample.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/project/cards/PhysicalSample.vue b/src/components/project/cards/PhysicalSample.vue
index 015405f..65f7a65 100644
--- a/src/components/project/cards/PhysicalSample.vue
+++ b/src/components/project/cards/PhysicalSample.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card | physical-sample" v-if="step.files.length > 0">
     <header
-      class="text-center rounded-lg py-32"
+      class="text-center rounded-lg p-32"
       :style="'--cover: url(' + step.cover + ')'"
     >
       <h3 class="text-lg font-serif">
@@ -9,9 +9,11 @@
           step.title
         }}</router-link>
       </h3>
-      <time class="font-medium text-sm py-8" :datetime="step.date">{{
-        step.date
-      }}</time>
+      <time
+        class="card__date | font-medium text-sm py-8"
+        :datetime="dayjs(step.date).format('YYYY-M-DD')"
+        >{{ dayjs(step.date).format("DD MMMM YYYY") }}</time
+      >
       <p>{{ step.description }}</p>
     </header>
     <img
@@ -23,5 +25,8 @@
   </div>
 </template>
 <script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
 const { step } = defineProps({ step: Object });
 </script>