Timezone select with UTC offsets

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

const americas = [
  { value: "est", label: "EST", offset: "UTC-5" },
  { value: "cst", label: "CST", offset: "UTC-6" },
  { value: "pst", label: "PST", offset: "UTC-8" },
]

const europe = [
  { value: "gmt", label: "GMT", offset: "UTC+0" },
  { value: "cet", label: "CET", offset: "UTC+1" },
]

const asia = [
  { value: "ist", label: "IST", offset: "UTC+5:30" },
  { value: "jst", label: "JST", offset: "UTC+9" },
]
</script>

<template>
  <Field class="max-w-xs">
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectLabel>Americas</SelectLabel>
          <SelectItem v-for="tz in americas" :key="tz.value" :value="tz.value">
            <span class="flex items-center justify-between gap-3">
              <span>{{ tz.label }}</span>
              <span class="text-muted-foreground text-xs">
                {{ tz.offset }}
              </span>
            </span>
          </SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Europe</SelectLabel>
          <SelectItem v-for="tz in europe" :key="tz.value" :value="tz.value">
            <span class="flex items-center justify-between gap-3">
              <span>{{ tz.label }}</span>
              <span class="text-muted-foreground text-xs">
                {{ tz.offset }}
              </span>
            </span>
          </SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Asia</SelectLabel>
          <SelectItem v-for="tz in asia" :key="tz.value" :value="tz.value">
            <span class="flex items-center justify-between gap-3">
              <span>{{ tz.label }}</span>
              <span class="text-muted-foreground text-xs">
                {{ tz.offset }}
              </span>
            </span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>