mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/examples/base/ui/button"
|
|
import {
|
|
Combobox,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxList,
|
|
ComboboxTrigger,
|
|
ComboboxValue,
|
|
} from "@/examples/base/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>
|
|
</>
|
|
)
|
|
}
|