fix: make the entire PhysicalSample card clickable and format date

close #74

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>