mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-01 00:24:20 +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
100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Combobox,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxList,
|
|
} from "@/examples/base/ui/combobox"
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemTitle,
|
|
} from "@/examples/base/ui/item"
|
|
|
|
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 ComboboxWithCustomItems() {
|
|
return (
|
|
<Combobox
|
|
items={countries.filter((country) => country.code !== "")}
|
|
itemToStringValue={(country: (typeof countries)[number]) => country.label}
|
|
>
|
|
<ComboboxInput placeholder="Search countries..." />
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>No countries found.</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(country) => (
|
|
<ComboboxItem key={country.code} value={country}>
|
|
<Item size="xs" className="p-0">
|
|
<ItemContent>
|
|
<ItemTitle className="whitespace-nowrap">
|
|
{country.label}
|
|
</ItemTitle>
|
|
<ItemDescription>
|
|
{country.continent} ({country.code})
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
)
|
|
}
|