Timezone Select Base UI Demo

1"use client";
2
3import { useId, useMemo, useState } from "react";
4import {
5  Command,
6  CommandEmpty,
7  CommandGroup,
8  CommandInput,
9  CommandItem,
10  CommandList,
11} from "@/registry/base-ui/examples/command";
12
13import { CheckIcon, ChevronDownIcon } from "lucide-react";
14
15import { Button } from "@/components/ui/button";
16import { Label } from "@/components/ui/label";
17import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
18
19import { cn } from "@/lib/utils";
20
21export function TimezonSelectExample() {
22  const id = useId();
23  const [open, setOpen] = useState<boolean>(false);
24  const [value, setValue] = useState<string>("Asia/Calcutta");
25
26  const timezones = Intl.supportedValuesOf("timeZone");
27
28  const formattedTimezones = useMemo(() => {
29    return timezones
30      .map((timezone) => {
31        const formatter = new Intl.DateTimeFormat("en", {
32          timeZone: timezone,
33          timeZoneName: "shortOffset",
34        });
35        const parts = formatter.formatToParts(new Date());
36        const offset = parts.find((part) => part.type === "timeZoneName")?.value || "";
37        const modifiedOffset = offset === "GMT" ? "GMT+0" : offset;
38
39        return {
40          value: timezone,
41          label: `(${modifiedOffset}) ${timezone.replace(/_/g, " ")}`,
42          numericOffset: parseInt(offset.replace("GMT", "").replace("+", "") || "0"),
43        };
44      })
45      .sort((a, b) => a.numericOffset - b.numericOffset);
46  }, [timezones]);
47
48  return (
49    <div className="*:not-first:mt-2">
50      <Label htmlFor={id}>Timezone select with search</Label>
51      <Popover open={open} onOpenChange={setOpen}>
52        <PopoverTrigger asChild>
53          <Button
54            id={id}
55            variant="outline"
56            role="combobox"
57            aria-expanded={open}
58            className="bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]"
59          >
60            <span className={cn("truncate", !value && "text-muted-foreground")}>
61              {value ? formattedTimezones.find((timezone) => timezone.value === value)?.label : "Select timezone"}
62            </span>
63            <ChevronDownIcon size={16} className="text-muted-foreground/80 shrink-0" aria-hidden="true" />
64          </Button>
65        </PopoverTrigger>
66// … truncated