Calendar with date picker

<!--
  Кейс проверяет ЗАКРЫТОЕ состояние триггера (см. PORTING.md §5,
  `ui-select`/`phone-input`/`autocomplete`): Radix и reka-ui позиционируют
  раскрытый Popover разными движками, попиксельное совпадение открытого
  попапа не гарантировано.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CCalendar } from "@/components/ui/calendar"

const date = ref<Date | undefined>(undefined)
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button class="group/pick-date w-60 justify-between" variant="outline">
        <span :class="['truncate', !date && 'text-muted-foreground']">Pick a date</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="opacity-60 transition-opacity group-hover/pick-date:opacity-100">
          <path d="M8 2v4" />
          <path d="M16 2v4" />
          <rect width="18" height="18" x="3" y="4" rx="2" />
          <path d="M3 10h18" />
        </svg>
      </Button>
    </PopoverTrigger>
    <PopoverContent align="start" class="w-auto p-0">
      <CCalendar mode="single" v-model="date" />
    </PopoverContent>
  </Popover>
</template>