Status filter select with colored dots

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

const statuses = [
  { value: "all", label: "All Status", color: "" },
  { value: "active", label: "Active", color: "bg-green-500" },
  { value: "inactive", label: "Inactive", color: "bg-red-500" },
  { value: "pending", label: "Pending", color: "bg-yellow-500" },
  { value: "archived", label: "Archived", color: "bg-gray-400" },
]
</script>

<template>
  <Field class="max-w-xs">
    <Select :default-value="statuses[0]!.value">
      <SelectTrigger>
        <SelectValue placeholder="Select status" />
      </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
                v-if="status.color"
                :class="`size-2 shrink-0 rounded-full ${status.color}`"
              />
              <span>{{ status.label }}</span>
            </span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>