feat: Développer le composant Datepicker (#52)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #52
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/date/internal/CalendarHeader.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex h-[36px] justify-between border-b border-black/60 mb-3">
+    <button
+      type="button"
+      data-test="header-prev"
+      class="ml-2 flex self-start rounded"
+      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
+      @click="emit('prev')"
+    >
+      <Icon
+        icon="mdi:chevron-left"
+        :width="25"
+        :height="25"
+      />
+    </button>
+
+    <button
+      type="button"
+      data-test="header-toggle"
+      class="flex gap-1 rounded text-base font-medium"
+      @click="emit('toggle-view')"
+    >
+      <span class="mt-[2px]">{{ label }}</span>
+      <Icon
+        icon="mdi:chevron-down"
+        :width="25"
+        :height="25"
+      />
+    </button>
+
+    <button
+      type="button"
+      data-test="header-next"
+      class="mr-2 flex self-start rounded"
+      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
+      @click="emit('next')"
+    >
+      <Icon
+        icon="mdi:chevron-right"
+        :width="25"
+        :height="25"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Icon} from '@iconify/vue'
+
+defineOptions({name: 'MalioDateCalendarHeader'})
+
+const props = defineProps<{
+  viewMode: 'days' | 'months'
+  currentMonth: number
+  currentYear: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'prev' | 'next' | 'toggle-view'): void
+}>()
+
+const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+
+const label = computed(() => {
+  const name = monthsLong[props.currentMonth]
+  return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
+})
+</script>