v0.0.1

src/components/MiniCalendar.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+type DayCell = {
+  key: string
+  label: number
+  date: Date
+  isCurrentMonth: boolean
+}
+
+defineProps<{
+  monthLabel: string
+  days: DayCell[]
+  selectedKey: string
+}>()
+
+const emit = defineEmits<{
+  select: [date: Date]
+}>()
+</script>
+
+<template>
+  <section class="border border-stone-200 bg-white/80 p-5">
+    <div class="mb-4 flex items-center justify-between">
+      <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
+      <span class="text-[11px] font-semibold tracking-[0.16em] text-stone-500">{{ monthLabel }}</span>
+    </div>
+    <div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
+      <span v-for="weekday in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" :key="weekday">{{ weekday }}</span>
+    </div>
+    <div class="grid grid-cols-7 gap-2">
+      <button
+        v-for="day in days"
+        :key="day.key"
+        type="button"
+        class="aspect-square rounded-full border text-[11px] font-semibold transition"
+        :class="[
+          day.key === selectedKey
+            ? 'border-ink bg-ink text-white'
+            : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
+          day.isCurrentMonth ? '' : 'opacity-35',
+        ]"
+        @click="emit('select', day.date)"
+      >
+        {{ day.label }}
+      </button>
+    </div>
+  </section>
+</template>