"use client";
import {
ChevronsUpDownIcon,
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
ComboboxPopup,
ComboboxTrigger,
ComboboxValue,
} from "@/registry/pure-ui/ui/combobox";
import { Button } from "@/registry/pure-ui/ui/button";
export function ComboboxInputInsidePopupDemo() {
return (
<Combobox defaultValue={countries[0]} items={countries}>
<ComboboxTrigger
render={
<Button
className="w-full justify-between font-normal max-w-xs active:scale-100"
variant="outline"
/>
}
>
<ComboboxValue />
<ChevronsUpDownIcon className="-me-1!" />
</ComboboxTrigger>
<ComboboxPopup aria-label="Select country" sideOffset={8}>
<div className="border-b p-2">
<ComboboxInput
className="rounded-md before:rounded-[calc(var(--radius-md)-1px)]"
placeholder="e.g. United Kingdom"
showTrigger={false}
/>
</div>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList>
{(country: Country) => (
<ComboboxItem key={country.code} value={country}>
{country.label}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxPopup>
</Combobox>
);
}
function ChevronUpDownIcon(props: React.ComponentProps<"svg">) {
return (
<svg
width="8"
height="12"
viewBox="0 0 8 12"
fill="none"
stroke="currentcolor"
strokeWidth="1.5"
{...props}
>
<path d="M0.5 4.5L4 1.5L7.5 4.5" />
<path d="M0.5 7.5L4 10.5L7.5 7.5" />
</svg>
);
}
function CheckIcon(props: React.ComponentProps<"svg">) {
return (
<svg
fill="currentcolor"
width="10"
height="10"
viewBox="0 0 10 10"
{...props}
>
<path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
</svg>
);
}
interface Country {
code: string;
value: string | null;
continent: string;
label: string;
}
const countries: Country[] = [
{ code: "", value: null, continent: "", label: "Select country" },
{ code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
{ code: "al", value: "albania", label: "Albania", continent: "Europe" },
{ code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
{ code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
{ code: "ao", value: "angola", label: "Angola", continent: "Africa" },
{
code: "ar",
value: "argentina",
label: "Argentina",
continent: "South America",
},
{ code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
{ code: "at", value: "austria", label: "Austria", continent: "Europe" },
{ code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
{
code: "bs",
value: "bahamas",
label: "Bahamas",
continent: "North America",
},
{ code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
{ code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
{
code: "bb",
value: "barbados",
label: "Barbados",
continent: "North America",
},
{ code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
{ code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
{ code: "bz", value: "belize", label: "Belize", continent: "North America" },
{ code: "bj", value: "benin", label: "Benin", continent: "Africa" },
{ code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
{
code: "bo",
value: "bolivia",
label: "Bolivia",
continent: "South America",
},
{
code: "ba",
value: "bosnia-and-herzegovina",
label: "Bosnia and Herzegovina",
continent: "Europe",
},
{ code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
{ code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
{ code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
{
code: "bf",
value: "burkina-faso",
label: "Burkina Faso",
continent: "Africa",
},
{ code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
{ code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
{ code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
{ code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
{
code: "cf",
value: "central-african-republic",
label: "Central African Republic",
continent: "Africa",
},
{ code: "td", value: "chad", label: "Chad", continent: "Africa" },
{ code: "cl", value: "chile", label: "Chile", continent: "South America" },
{ code: "cn", value: "china", label: "China", continent: "Asia" },
{
code: "co",
value: "colombia",
label: "Colombia",
continent: "South America",
},
{ code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
{ code: "cg", value: "congo", label: "Congo", continent: "Africa" },
{
code: "cr",
value: "costa-rica",
label: "Costa Rica",
continent: "North America",
},
{ code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
{ code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
{ code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
{
code: "cz",
value: "czech-republic",
label: "Czech Republic",
continent: "Europe",
},
{ code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
{ code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
{
code: "dm",
value: "dominica",
label: "Dominica",
continent: "North America",
},
{
code: "do",
value: "dominican-republic",
label: "Dominican Republic",
continent: "North America",
},
{
code: "ec",
value: "ecuador",
label: "Ecuador",
continent: "South America",
},
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
{
code: "sv",
value: "el-salvador",
label: "El Salvador",
continent: "North America",
},
{
code: "gq",
value: "equatorial-guinea",
label: "Equatorial Guinea",
continent: "Africa",
},
{ code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
{ code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
{ code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
{ code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
{ code: "fi", value: "finland", label: "Finland", continent: "Europe" },
{ code: "fr", value: "france", label: "France", continent: "Europe" },
{ code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
{ code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
{ code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
{ code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
{ code: "gr", value: "greece", label: "Greece", continent: "Europe" },
{
code: "gd",
value: "grenada",
label: "Grenada",
continent: "North America",
},
{
code: "gt",
value: "guatemala",
label: "Guatemala",
continent: "North America",
},
{ code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
{
code: "gw",
value: "guinea-bissau",
label: "Guinea-Bissau",
continent: "Africa",
},
{ code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
{ code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
{
code: "hn",
value: "honduras",
label: "Honduras",
continent: "North America",
},
{ code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
{ code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
{ code: "in", value: "india", label: "India", continent: "Asia" },
{ code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
{ code: "ir", value: "iran", label: "Iran", continent: "Asia" },
{ code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
{ code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
{ code: "il", value: "israel", label: "Israel", continent: "Asia" },
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
{
code: "jm",
value: "jamaica",
label: "Jamaica",
continent: "North America",
},
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
{ code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
{ code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
{ code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
{ code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
{ code: "la", value: "laos", label: "Laos", continent: "Asia" },
{ code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
{ code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
{ code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
{ code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
{ code: "ly", value: "libya", label: "Libya", continent: "Africa" },
{
code: "li",
value: "liechtenstein",
label: "Liechtenstein",
continent: "Europe",
},
{ code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
{ code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
{ code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
{ code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
{ code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
{ code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
{ code: "ml", value: "mali", label: "Mali", continent: "Africa" },
{ code: "mt", value: "malta", label: "Malta", continent: "Europe" },
{
code: "mh",
value: "marshall-islands",
label: "Marshall Islands",
continent: "Oceania",
},
{ code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
{ code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
{
code: "fm",
value: "micronesia",
label: "Micronesia",
continent: "Oceania",
},
{ code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
{ code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
{ code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
{ code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
{ code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
{ code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
{ code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
{ code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
{ code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
{ code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
{
code: "nl",
value: "netherlands",
label: "Netherlands",
continent: "Europe",
},
{
code: "nz",
value: "new-zealand",
label: "New Zealand",
continent: "Oceania",
},
{
code: "ni",
value: "nicaragua",
label: "Nicaragua",
continent: "North America",
},
{ code: "ne", value: "niger", label: "Niger", continent: "Africa" },
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
{ code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
{
code: "mk",
value: "north-macedonia",
label: "North Macedonia",
continent: "Europe",
},
{ code: "no", value: "norway", label: "Norway", continent: "Europe" },
{ code: "om", value: "oman", label: "Oman", continent: "Asia" },
{ code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
{ code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
{ code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
{ code: "pa", value: "panama", label: "Panama", continent: "North America" },
{
code: "pg",
value: "papua-new-guinea",
label: "Papua New Guinea",
continent: "Oceania",
},
{
code: "py",
value: "paraguay",
label: "Paraguay",
continent: "South America",
},
{ code: "pe", value: "peru", label: "Peru", continent: "South America" },
{ code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
{ code: "pl", value: "poland", label: "Poland", continent: "Europe" },
{ code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
{ code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
{ code: "ro", value: "romania", label: "Romania", continent: "Europe" },
{ code: "ru", value: "russia", label: "Russia", continent: "Europe" },
{ code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
{ code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
{ code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
{
code: "sa",
value: "saudi-arabia",
label: "Saudi Arabia",
continent: "Asia",
},
{ code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
{ code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
{ code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
{
code: "sl",
value: "sierra-leone",
label: "Sierra Leone",
continent: "Africa",
},
{ code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
{ code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
{ code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
{
code: "sb",
value: "solomon-islands",
label: "Solomon Islands",
continent: "Oceania",
},
{ code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
{
code: "za",
value: "south-africa",
label: "South Africa",
continent: "Africa",
},
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
{
code: "ss",
value: "south-sudan",
label: "South Sudan",
continent: "Africa",
},
{ code: "es", value: "spain", label: "Spain", continent: "Europe" },
{ code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
{ code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
{
code: "sr",
value: "suriname",
label: "Suriname",
continent: "South America",
},
{ code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
{
code: "ch",
value: "switzerland",
label: "Switzerland",
continent: "Europe",
},
{ code: "sy", value: "syria", label: "Syria", continent: "Asia" },
{ code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
{ code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
{ code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
{ code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
{ code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
{ code: "tg", value: "togo", label: "Togo", continent: "Africa" },
{ code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
{
code: "tt",
value: "trinidad-and-tobago",
label: "Trinidad and Tobago",
continent: "North America",
},
{ code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
{ code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
{
code: "tm",
value: "turkmenistan",
label: "Turkmenistan",
continent: "Asia",
},
{ code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
{ code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
{ code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
{
code: "ae",
value: "united-arab-emirates",
label: "United Arab Emirates",
continent: "Asia",
},
{
code: "gb",
value: "united-kingdom",
label: "United Kingdom",
continent: "Europe",
},
{
code: "us",
value: "united-states",
label: "United States",
continent: "North America",
},
{
code: "uy",
value: "uruguay",
label: "Uruguay",
continent: "South America",
},
{ code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
{ code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
{
code: "va",
value: "vatican-city",
label: "Vatican City",
continent: "Europe",
},
{
code: "ve",
value: "venezuela",
label: "Venezuela",
continent: "South America",
},
{ code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
{ code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
{ code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
{ code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
];