Button group with select status addon

<script setup lang="ts">
import { ButtonGroup } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const statuses = [
  { value: "1", label: "In Progress", color: "bg-violet-500" },
  { value: "2", label: "Completed", color: "bg-green-500" },
  { value: "3", label: "Pending", color: "bg-primary" },
  { value: "4", label: "Cancelled", color: "bg-yellow-500" },
  { value: "5", label: "Rejected", color: "bg-destructive" },
]

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

<template>
  <ButtonGroup class="max-w-xs">
    <Select default-value="2">
      <SelectTrigger class="min-w-36">
        <!--
          reka-ui's SelectValue отдаёт только textContent выбранного
          SelectItem, тогда как Radix's Select.Value заново монтирует
          children целиком (см. docs/PORTING.md §5, packages/blocks/src/
          select/c-select-6.vue) — цветная точка пропадала бы молча.
        -->
        <SelectValue placeholder="Select status">
          <template #default="{ modelValue }">
            <span v-if="findStatus(modelValue)" class="flex items-center gap-2">
              <span :class="['size-1.5 rounded-full', findStatus(modelValue)!.color]" />
              <span>{{ findStatus(modelValue)!.label }}</span>
            </span>
          </template>
        </SelectValue>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectItem
            v-for="status in statuses"
            :key="status.value"
            :value="status.value"
          >
            <span class="flex items-center gap-2">
              <span :class="['size-1.5 rounded-full', status.color]" />
              <span>{{ status.label }}</span>
            </span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <Input placeholder="Search tasks..." />
  </ButtonGroup>
</template>