77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Combobox,
|
|
ComboboxCollection,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxGroup,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxLabel,
|
|
ComboboxList,
|
|
ComboboxSeparator,
|
|
} from "@/styles/base-nova/ui/combobox"
|
|
|
|
const timezones = [
|
|
{
|
|
value: "Americas",
|
|
items: [
|
|
"(GMT-5) New York",
|
|
"(GMT-8) Los Angeles",
|
|
"(GMT-6) Chicago",
|
|
"(GMT-5) Toronto",
|
|
"(GMT-8) Vancouver",
|
|
"(GMT-3) São Paulo",
|
|
],
|
|
},
|
|
{
|
|
value: "Europe",
|
|
items: [
|
|
"(GMT+0) London",
|
|
"(GMT+1) Paris",
|
|
"(GMT+1) Berlin",
|
|
"(GMT+1) Rome",
|
|
"(GMT+1) Madrid",
|
|
"(GMT+1) Amsterdam",
|
|
],
|
|
},
|
|
{
|
|
value: "Asia/Pacific",
|
|
items: [
|
|
"(GMT+9) Tokyo",
|
|
"(GMT+8) Shanghai",
|
|
"(GMT+8) Singapore",
|
|
"(GMT+4) Dubai",
|
|
"(GMT+11) Sydney",
|
|
"(GMT+9) Seoul",
|
|
],
|
|
},
|
|
] as const
|
|
|
|
export function ComboboxWithGroupsAndSeparator() {
|
|
return (
|
|
<Combobox items={timezones}>
|
|
<ComboboxInput placeholder="Select a timezone" />
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>No timezones found.</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(group, index) => (
|
|
<ComboboxGroup key={group.value} items={group.items}>
|
|
<ComboboxLabel>{group.value}</ComboboxLabel>
|
|
<ComboboxCollection>
|
|
{(item) => (
|
|
<ComboboxItem key={item} value={item}>
|
|
{item}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxCollection>
|
|
{index < timezones.length - 1 && <ComboboxSeparator />}
|
|
</ComboboxGroup>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
)
|
|
}
|