Select with status badges

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

const statuses = [
  { value: "1", label: "In Progress", variant: "warning-outline" as const },
  { value: "2", label: "Completed", variant: "success-outline" as const },
  { value: "3", label: "Pending", variant: "info-outline" as const },
  { value: "4", label: "Cancelled", variant: "primary-outline" as const },
  { value: "5", label: "Rejected", variant: "destructive-outline" as const },
]

function findStatus(value: unknown) {
  return statuses.find((status) => status.value === value)
}
</script>

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