mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/styles/base-nova/ui/button"
|
|
import {
|
|
Combobox,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxList,
|
|
ComboboxTrigger,
|
|
ComboboxValue,
|
|
} from "@/styles/base-nova/ui/combobox"
|
|
|
|
const countries = [
|
|
{ code: "", value: "", continent: "", label: "Select country" },
|
|
{
|
|
code: "ar",
|
|
value: "argentina",
|
|
label: "Argentina",
|
|
continent: "South America",
|
|
},
|
|
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
|
|
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
|
|
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
|
|
{ code: "cn", value: "china", label: "China", continent: "Asia" },
|
|
{
|
|
code: "co",
|
|
value: "colombia",
|
|
label: "Colombia",
|
|
continent: "South America",
|
|
},
|
|
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
|
|
{ code: "fr", value: "france", label: "France", continent: "Europe" },
|
|
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
|
|
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
|
|
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
|
|
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
|
|
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
|
|
{
|
|
code: "nz",
|
|
value: "new-zealand",
|
|
label: "New Zealand",
|
|
continent: "Oceania",
|
|
},
|
|
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
|
|
{
|
|
code: "za",
|
|
value: "south-africa",
|
|
label: "South Africa",
|
|
continent: "Africa",
|
|
},
|
|
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
|
|
{
|
|
code: "gb",
|
|
value: "united-kingdom",
|
|
label: "United Kingdom",
|
|
continent: "Europe",
|
|
},
|
|
{
|
|
code: "us",
|
|
value: "united-states",
|
|
label: "United States",
|
|
continent: "North America",
|
|
},
|
|
]
|
|
|
|
export function ComboboxPopup() {
|
|
return (
|
|
<>
|
|
<Combobox items={countries} defaultValue={countries[0]}>
|
|
<ComboboxTrigger
|
|
render={
|
|
<Button
|
|
variant="outline"
|
|
className="w-64 justify-between font-normal"
|
|
/>
|
|
}
|
|
>
|
|
<ComboboxValue />
|
|
</ComboboxTrigger>
|
|
<ComboboxContent>
|
|
<ComboboxInput showTrigger={false} placeholder="Search" />
|
|
<ComboboxEmpty>No items found.</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(item) => (
|
|
<ComboboxItem key={item.code} value={item}>
|
|
{item.label}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
</>
|
|
)
|
|
}
|