Calendar with presets

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Calendar as CCalendar } from "@/components/ui/calendar"

const today = new Date(2026, 0, 15)
function addDays(d: Date, n: number): Date {
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n)
}
const yesterday = addDays(today, -1)
const lastWeek = addDays(today, -7)
const lastMonth = new Date(2025, 11, 15)
const lastYear = new Date(2025, 0, 15)

const month = ref<Date>(today)
const date = ref<Date>(today)

function pick(d: Date) {
  date.value = d
  month.value = d
}
</script>

<template>
  <Card class="p-0">
    <CardContent class="p-0">
      <div class="flex max-sm:flex-col">
        <div class="relative py-4 max-sm:order-1 max-sm:border-t sm:w-32">
          <div class="h-full sm:border-e">
            <div class="flex flex-col px-2">
              <Button class="w-full justify-start" size="sm" variant="ghost" @click="pick(today)">Today</Button>
              <Button class="w-full justify-start" size="sm" variant="ghost" @click="pick(yesterday)">Yesterday</Button>
              <Button class="w-full justify-start" size="sm" variant="ghost" @click="pick(lastWeek)">Last week</Button>
              <Button class="w-full justify-start" size="sm" variant="ghost" @click="pick(lastMonth)">Last month</Button>
              <Button class="w-full justify-start" size="sm" variant="ghost" @click="pick(lastYear)">Last year</Button>
            </div>
          </div>
        </div>
        <CCalendar mode="single" v-model="date" :month="month" @update:month="month = $event" :disabled-fn="(d: Date) => d > today" />
      </div>
    </CardContent>
  </Card>
</template>