Components
Loading preview...
Enhanced shadcn/ui select
npx shadcn@latest add https://21st.dev/r/originui/selectimport { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useId, useMemo } from "react";
function Component() {
const id = useId();
const timezones = Intl.supportedValuesOf("timeZone");
const formattedTimezones = useMemo(() => {
return timezones
.map((timezone) => {
const formatter = new Intl.DateTimeFormat("en", {
timeZone: timezone,
timeZoneName: "shortOffset",
});
const parts = formatter.formatToParts(new Date());
const offset = parts.find((part) => part.type === "timeZoneName")?.value || "";
const modifiedOffset = offset === "GMT" ? "GMT+0" : offset;
return {
value: timezone,
label: `(${modifiedOffset}) ${timezone.replace(/_/g, " ")}`,
numericOffset: parseInt(offset.replace("GMT", "").replace("+", "") || "0"),
};
})
.sort((a, b) => a.numericOffset - b.numericOffset);
}, [timezones]);
return (
<div className="space-y-2 min-w-[300px]">
<Label htmlFor={id}>Timezone select</Label>
<Select defaultValue="Europe/London">
<SelectTrigger id={id}>
<SelectValue placeholder="Select timezone" />
</SelectTrigger>
<SelectContent>
{formattedTimezones.map(({ value, label }) => (
<SelectItem key={value} value={value}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
}
export { Component };