48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
monthLabel: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
days: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
selectedKey: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['select'])
|
|
</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>
|