'use client';
import { Button } from '@/registry/default/ui/base-button';
import {
Combobox,
ComboboxClear,
ComboboxContent,
ComboboxEmpty,
ComboboxIcon,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
ComboboxList,
ComboboxTrigger,
ComboboxValue,
} from '@/registry/default/ui/base-combobox';
export default function PopupInputCombobox() {
return (
<Combobox items={countries}>
<div className="relative max-w-xs w-full">
<ComboboxTrigger className="w-full" render={<Button variant="outline" mode="input" />}>
<ComboboxValue>{(value: Country) => <>{value ? value.label : 'Select country'}</>}</ComboboxValue>
<ComboboxIcon />
</ComboboxTrigger>
<ComboboxClear />
</div>
<ComboboxContent className="pt-0">
<div className="p-2">
<ComboboxInput placeholder="e.g. United Kingdom" />
</div>
<ComboboxEmpty>No countries found.</ComboboxEmpty>
<ComboboxList className="overflow-y-auto max-h-[300px]">
{(country: Country) => (
<ComboboxItem key={country.code} value={country}>
<ComboboxItemIndicator />
{country.label ?? country.value}
</ComboboxItem>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}
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' },
];