Font family select with preview

<script setup lang="ts">
import { Field } from "@/components/ui/field"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const fonts = [
  { value: "sans", label: "Inter", className: "font-sans" },
  { value: "mono", label: "Mono", className: "font-mono" },
  { value: "serif", label: "Serif", className: "font-serif" },
]

function findFont(value: unknown) {
  return fonts.find((font) => font.value === value)
}
</script>

<template>
  <Field class="max-w-xs">
    <Select :default-value="fonts[0]!.value">
      <SelectTrigger class="w-[200px]">
        <!--
          reka-ui's SelectValue отдаёт только textContent выбранного
          SelectItem, тогда как Radix's Select.Value заново монтирует
          children целиком (см. комментарий в c-select-6.vue).
        -->
        <SelectValue placeholder="Select font">
          <template #default="{ modelValue }">
            <span v-if="findFont(modelValue)" :class="findFont(modelValue)!.className">
              {{ findFont(modelValue)!.label }}
            </span>
          </template>
        </SelectValue>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectItem v-for="font in fonts" :key="font.value" :value="font.value">
            <span :class="font.className">{{ font.label }}</span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>