298 lines
17 KiB
TypeScript
298 lines
17 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import * as React from 'react'
|
||
|
|
import { CheckIcon, ChevronsUpDown } from 'lucide-react'
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import {
|
||
|
|
Command,
|
||
|
|
CommandEmpty,
|
||
|
|
CommandGroup,
|
||
|
|
CommandInput,
|
||
|
|
CommandItem,
|
||
|
|
CommandList,
|
||
|
|
} from '@/components/ui/command'
|
||
|
|
import {
|
||
|
|
Popover,
|
||
|
|
PopoverContent,
|
||
|
|
PopoverTrigger,
|
||
|
|
} from '@/components/ui/popover'
|
||
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
||
|
|
|
||
|
|
// Country data with ISO codes and flag emojis
|
||
|
|
const countries = [
|
||
|
|
{ code: 'AF', name: 'Afghanistan', flag: '\uD83C\uDDE6\uD83C\uDDEB' },
|
||
|
|
{ code: 'AL', name: 'Albania', flag: '\uD83C\uDDE6\uD83C\uDDF1' },
|
||
|
|
{ code: 'DZ', name: 'Algeria', flag: '\uD83C\uDDE9\uD83C\uDDFF' },
|
||
|
|
{ code: 'AD', name: 'Andorra', flag: '\uD83C\uDDE6\uD83C\uDDE9' },
|
||
|
|
{ code: 'AO', name: 'Angola', flag: '\uD83C\uDDE6\uD83C\uDDF4' },
|
||
|
|
{ code: 'AR', name: 'Argentina', flag: '\uD83C\uDDE6\uD83C\uDDF7' },
|
||
|
|
{ code: 'AM', name: 'Armenia', flag: '\uD83C\uDDE6\uD83C\uDDF2' },
|
||
|
|
{ code: 'AU', name: 'Australia', flag: '\uD83C\uDDE6\uD83C\uDDFA' },
|
||
|
|
{ code: 'AT', name: 'Austria', flag: '\uD83C\uDDE6\uD83C\uDDF9' },
|
||
|
|
{ code: 'AZ', name: 'Azerbaijan', flag: '\uD83C\uDDE6\uD83C\uDDFF' },
|
||
|
|
{ code: 'BS', name: 'Bahamas', flag: '\uD83C\uDDE7\uD83C\uDDF8' },
|
||
|
|
{ code: 'BH', name: 'Bahrain', flag: '\uD83C\uDDE7\uD83C\uDDED' },
|
||
|
|
{ code: 'BD', name: 'Bangladesh', flag: '\uD83C\uDDE7\uD83C\uDDE9' },
|
||
|
|
{ code: 'BB', name: 'Barbados', flag: '\uD83C\uDDE7\uD83C\uDDE7' },
|
||
|
|
{ code: 'BY', name: 'Belarus', flag: '\uD83C\uDDE7\uD83C\uDDFE' },
|
||
|
|
{ code: 'BE', name: 'Belgium', flag: '\uD83C\uDDE7\uD83C\uDDEA' },
|
||
|
|
{ code: 'BZ', name: 'Belize', flag: '\uD83C\uDDE7\uD83C\uDDFF' },
|
||
|
|
{ code: 'BJ', name: 'Benin', flag: '\uD83C\uDDE7\uD83C\uDDEF' },
|
||
|
|
{ code: 'BT', name: 'Bhutan', flag: '\uD83C\uDDE7\uD83C\uDDF9' },
|
||
|
|
{ code: 'BO', name: 'Bolivia', flag: '\uD83C\uDDE7\uD83C\uDDF4' },
|
||
|
|
{ code: 'BA', name: 'Bosnia and Herzegovina', flag: '\uD83C\uDDE7\uD83C\uDDE6' },
|
||
|
|
{ code: 'BW', name: 'Botswana', flag: '\uD83C\uDDE7\uD83C\uDDFC' },
|
||
|
|
{ code: 'BR', name: 'Brazil', flag: '\uD83C\uDDE7\uD83C\uDDF7' },
|
||
|
|
{ code: 'BN', name: 'Brunei', flag: '\uD83C\uDDE7\uD83C\uDDF3' },
|
||
|
|
{ code: 'BG', name: 'Bulgaria', flag: '\uD83C\uDDE7\uD83C\uDDEC' },
|
||
|
|
{ code: 'BF', name: 'Burkina Faso', flag: '\uD83C\uDDE7\uD83C\uDDEB' },
|
||
|
|
{ code: 'BI', name: 'Burundi', flag: '\uD83C\uDDE7\uD83C\uDDEE' },
|
||
|
|
{ code: 'KH', name: 'Cambodia', flag: '\uD83C\uDDF0\uD83C\uDDED' },
|
||
|
|
{ code: 'CM', name: 'Cameroon', flag: '\uD83C\uDDE8\uD83C\uDDF2' },
|
||
|
|
{ code: 'CA', name: 'Canada', flag: '\uD83C\uDDE8\uD83C\uDDE6' },
|
||
|
|
{ code: 'CV', name: 'Cape Verde', flag: '\uD83C\uDDE8\uD83C\uDDFB' },
|
||
|
|
{ code: 'CF', name: 'Central African Republic', flag: '\uD83C\uDDE8\uD83C\uDDEB' },
|
||
|
|
{ code: 'TD', name: 'Chad', flag: '\uD83C\uDDF9\uD83C\uDDE9' },
|
||
|
|
{ code: 'CL', name: 'Chile', flag: '\uD83C\uDDE8\uD83C\uDDF1' },
|
||
|
|
{ code: 'CN', name: 'China', flag: '\uD83C\uDDE8\uD83C\uDDF3' },
|
||
|
|
{ code: 'CO', name: 'Colombia', flag: '\uD83C\uDDE8\uD83C\uDDF4' },
|
||
|
|
{ code: 'KM', name: 'Comoros', flag: '\uD83C\uDDF0\uD83C\uDDF2' },
|
||
|
|
{ code: 'CG', name: 'Congo', flag: '\uD83C\uDDE8\uD83C\uDDEC' },
|
||
|
|
{ code: 'CR', name: 'Costa Rica', flag: '\uD83C\uDDE8\uD83C\uDDF7' },
|
||
|
|
{ code: 'HR', name: 'Croatia', flag: '\uD83C\uDDED\uD83C\uDDF7' },
|
||
|
|
{ code: 'CU', name: 'Cuba', flag: '\uD83C\uDDE8\uD83C\uDDFA' },
|
||
|
|
{ code: 'CY', name: 'Cyprus', flag: '\uD83C\uDDE8\uD83C\uDDFE' },
|
||
|
|
{ code: 'CZ', name: 'Czech Republic', flag: '\uD83C\uDDE8\uD83C\uDDFF' },
|
||
|
|
{ code: 'DK', name: 'Denmark', flag: '\uD83C\uDDE9\uD83C\uDDF0' },
|
||
|
|
{ code: 'DJ', name: 'Djibouti', flag: '\uD83C\uDDE9\uD83C\uDDEF' },
|
||
|
|
{ code: 'DM', name: 'Dominica', flag: '\uD83C\uDDE9\uD83C\uDDF2' },
|
||
|
|
{ code: 'DO', name: 'Dominican Republic', flag: '\uD83C\uDDE9\uD83C\uDDF4' },
|
||
|
|
{ code: 'EC', name: 'Ecuador', flag: '\uD83C\uDDEA\uD83C\uDDE8' },
|
||
|
|
{ code: 'EG', name: 'Egypt', flag: '\uD83C\uDDEA\uD83C\uDDEC' },
|
||
|
|
{ code: 'SV', name: 'El Salvador', flag: '\uD83C\uDDF8\uD83C\uDDFB' },
|
||
|
|
{ code: 'GQ', name: 'Equatorial Guinea', flag: '\uD83C\uDDEC\uD83C\uDDF6' },
|
||
|
|
{ code: 'ER', name: 'Eritrea', flag: '\uD83C\uDDEA\uD83C\uDDF7' },
|
||
|
|
{ code: 'EE', name: 'Estonia', flag: '\uD83C\uDDEA\uD83C\uDDEA' },
|
||
|
|
{ code: 'ET', name: 'Ethiopia', flag: '\uD83C\uDDEA\uD83C\uDDF9' },
|
||
|
|
{ code: 'FJ', name: 'Fiji', flag: '\uD83C\uDDEB\uD83C\uDDEF' },
|
||
|
|
{ code: 'FI', name: 'Finland', flag: '\uD83C\uDDEB\uD83C\uDDEE' },
|
||
|
|
{ code: 'FR', name: 'France', flag: '\uD83C\uDDEB\uD83C\uDDF7' },
|
||
|
|
{ code: 'GA', name: 'Gabon', flag: '\uD83C\uDDEC\uD83C\uDDE6' },
|
||
|
|
{ code: 'GM', name: 'Gambia', flag: '\uD83C\uDDEC\uD83C\uDDF2' },
|
||
|
|
{ code: 'GE', name: 'Georgia', flag: '\uD83C\uDDEC\uD83C\uDDEA' },
|
||
|
|
{ code: 'DE', name: 'Germany', flag: '\uD83C\uDDE9\uD83C\uDDEA' },
|
||
|
|
{ code: 'GH', name: 'Ghana', flag: '\uD83C\uDDEC\uD83C\uDDED' },
|
||
|
|
{ code: 'GR', name: 'Greece', flag: '\uD83C\uDDEC\uD83C\uDDF7' },
|
||
|
|
{ code: 'GD', name: 'Grenada', flag: '\uD83C\uDDEC\uD83C\uDDE9' },
|
||
|
|
{ code: 'GT', name: 'Guatemala', flag: '\uD83C\uDDEC\uD83C\uDDF9' },
|
||
|
|
{ code: 'GN', name: 'Guinea', flag: '\uD83C\uDDEC\uD83C\uDDF3' },
|
||
|
|
{ code: 'GW', name: 'Guinea-Bissau', flag: '\uD83C\uDDEC\uD83C\uDDFC' },
|
||
|
|
{ code: 'GY', name: 'Guyana', flag: '\uD83C\uDDEC\uD83C\uDDFE' },
|
||
|
|
{ code: 'HT', name: 'Haiti', flag: '\uD83C\uDDED\uD83C\uDDF9' },
|
||
|
|
{ code: 'HN', name: 'Honduras', flag: '\uD83C\uDDED\uD83C\uDDF3' },
|
||
|
|
{ code: 'HK', name: 'Hong Kong', flag: '\uD83C\uDDED\uD83C\uDDF0' },
|
||
|
|
{ code: 'HU', name: 'Hungary', flag: '\uD83C\uDDED\uD83C\uDDFA' },
|
||
|
|
{ code: 'IS', name: 'Iceland', flag: '\uD83C\uDDEE\uD83C\uDDF8' },
|
||
|
|
{ code: 'IN', name: 'India', flag: '\uD83C\uDDEE\uD83C\uDDF3' },
|
||
|
|
{ code: 'ID', name: 'Indonesia', flag: '\uD83C\uDDEE\uD83C\uDDE9' },
|
||
|
|
{ code: 'IR', name: 'Iran', flag: '\uD83C\uDDEE\uD83C\uDDF7' },
|
||
|
|
{ code: 'IQ', name: 'Iraq', flag: '\uD83C\uDDEE\uD83C\uDDF6' },
|
||
|
|
{ code: 'IE', name: 'Ireland', flag: '\uD83C\uDDEE\uD83C\uDDEA' },
|
||
|
|
{ code: 'IL', name: 'Israel', flag: '\uD83C\uDDEE\uD83C\uDDF1' },
|
||
|
|
{ code: 'IT', name: 'Italy', flag: '\uD83C\uDDEE\uD83C\uDDF9' },
|
||
|
|
{ code: 'CI', name: 'Ivory Coast', flag: '\uD83C\uDDE8\uD83C\uDDEE' },
|
||
|
|
{ code: 'JM', name: 'Jamaica', flag: '\uD83C\uDDEF\uD83C\uDDF2' },
|
||
|
|
{ code: 'JP', name: 'Japan', flag: '\uD83C\uDDEF\uD83C\uDDF5' },
|
||
|
|
{ code: 'JO', name: 'Jordan', flag: '\uD83C\uDDEF\uD83C\uDDF4' },
|
||
|
|
{ code: 'KZ', name: 'Kazakhstan', flag: '\uD83C\uDDF0\uD83C\uDDFF' },
|
||
|
|
{ code: 'KE', name: 'Kenya', flag: '\uD83C\uDDF0\uD83C\uDDEA' },
|
||
|
|
{ code: 'KI', name: 'Kiribati', flag: '\uD83C\uDDF0\uD83C\uDDEE' },
|
||
|
|
{ code: 'KW', name: 'Kuwait', flag: '\uD83C\uDDF0\uD83C\uDDFC' },
|
||
|
|
{ code: 'KG', name: 'Kyrgyzstan', flag: '\uD83C\uDDF0\uD83C\uDDEC' },
|
||
|
|
{ code: 'LA', name: 'Laos', flag: '\uD83C\uDDF1\uD83C\uDDE6' },
|
||
|
|
{ code: 'LV', name: 'Latvia', flag: '\uD83C\uDDF1\uD83C\uDDFB' },
|
||
|
|
{ code: 'LB', name: 'Lebanon', flag: '\uD83C\uDDF1\uD83C\uDDE7' },
|
||
|
|
{ code: 'LS', name: 'Lesotho', flag: '\uD83C\uDDF1\uD83C\uDDF8' },
|
||
|
|
{ code: 'LR', name: 'Liberia', flag: '\uD83C\uDDF1\uD83C\uDDF7' },
|
||
|
|
{ code: 'LY', name: 'Libya', flag: '\uD83C\uDDF1\uD83C\uDDFE' },
|
||
|
|
{ code: 'LI', name: 'Liechtenstein', flag: '\uD83C\uDDF1\uD83C\uDDEE' },
|
||
|
|
{ code: 'LT', name: 'Lithuania', flag: '\uD83C\uDDF1\uD83C\uDDF9' },
|
||
|
|
{ code: 'LU', name: 'Luxembourg', flag: '\uD83C\uDDF1\uD83C\uDDFA' },
|
||
|
|
{ code: 'MO', name: 'Macau', flag: '\uD83C\uDDF2\uD83C\uDDF4' },
|
||
|
|
{ code: 'MK', name: 'Macedonia', flag: '\uD83C\uDDF2\uD83C\uDDF0' },
|
||
|
|
{ code: 'MG', name: 'Madagascar', flag: '\uD83C\uDDF2\uD83C\uDDEC' },
|
||
|
|
{ code: 'MW', name: 'Malawi', flag: '\uD83C\uDDF2\uD83C\uDDFC' },
|
||
|
|
{ code: 'MY', name: 'Malaysia', flag: '\uD83C\uDDF2\uD83C\uDDFE' },
|
||
|
|
{ code: 'MV', name: 'Maldives', flag: '\uD83C\uDDF2\uD83C\uDDFB' },
|
||
|
|
{ code: 'ML', name: 'Mali', flag: '\uD83C\uDDF2\uD83C\uDDF1' },
|
||
|
|
{ code: 'MT', name: 'Malta', flag: '\uD83C\uDDF2\uD83C\uDDF9' },
|
||
|
|
{ code: 'MH', name: 'Marshall Islands', flag: '\uD83C\uDDF2\uD83C\uDDED' },
|
||
|
|
{ code: 'MR', name: 'Mauritania', flag: '\uD83C\uDDF2\uD83C\uDDF7' },
|
||
|
|
{ code: 'MU', name: 'Mauritius', flag: '\uD83C\uDDF2\uD83C\uDDFA' },
|
||
|
|
{ code: 'MX', name: 'Mexico', flag: '\uD83C\uDDF2\uD83C\uDDFD' },
|
||
|
|
{ code: 'FM', name: 'Micronesia', flag: '\uD83C\uDDEB\uD83C\uDDF2' },
|
||
|
|
{ code: 'MD', name: 'Moldova', flag: '\uD83C\uDDF2\uD83C\uDDE9' },
|
||
|
|
{ code: 'MC', name: 'Monaco', flag: '\uD83C\uDDF2\uD83C\uDDE8' },
|
||
|
|
{ code: 'MN', name: 'Mongolia', flag: '\uD83C\uDDF2\uD83C\uDDF3' },
|
||
|
|
{ code: 'ME', name: 'Montenegro', flag: '\uD83C\uDDF2\uD83C\uDDEA' },
|
||
|
|
{ code: 'MA', name: 'Morocco', flag: '\uD83C\uDDF2\uD83C\uDDE6' },
|
||
|
|
{ code: 'MZ', name: 'Mozambique', flag: '\uD83C\uDDF2\uD83C\uDDFF' },
|
||
|
|
{ code: 'MM', name: 'Myanmar', flag: '\uD83C\uDDF2\uD83C\uDDF2' },
|
||
|
|
{ code: 'NA', name: 'Namibia', flag: '\uD83C\uDDF3\uD83C\uDDE6' },
|
||
|
|
{ code: 'NR', name: 'Nauru', flag: '\uD83C\uDDF3\uD83C\uDDF7' },
|
||
|
|
{ code: 'NP', name: 'Nepal', flag: '\uD83C\uDDF3\uD83C\uDDF5' },
|
||
|
|
{ code: 'NL', name: 'Netherlands', flag: '\uD83C\uDDF3\uD83C\uDDF1' },
|
||
|
|
{ code: 'NZ', name: 'New Zealand', flag: '\uD83C\uDDF3\uD83C\uDDFF' },
|
||
|
|
{ code: 'NI', name: 'Nicaragua', flag: '\uD83C\uDDF3\uD83C\uDDEE' },
|
||
|
|
{ code: 'NE', name: 'Niger', flag: '\uD83C\uDDF3\uD83C\uDDEA' },
|
||
|
|
{ code: 'NG', name: 'Nigeria', flag: '\uD83C\uDDF3\uD83C\uDDEC' },
|
||
|
|
{ code: 'KP', name: 'North Korea', flag: '\uD83C\uDDF0\uD83C\uDDF5' },
|
||
|
|
{ code: 'NO', name: 'Norway', flag: '\uD83C\uDDF3\uD83C\uDDF4' },
|
||
|
|
{ code: 'OM', name: 'Oman', flag: '\uD83C\uDDF4\uD83C\uDDF2' },
|
||
|
|
{ code: 'PK', name: 'Pakistan', flag: '\uD83C\uDDF5\uD83C\uDDF0' },
|
||
|
|
{ code: 'PW', name: 'Palau', flag: '\uD83C\uDDF5\uD83C\uDDFC' },
|
||
|
|
{ code: 'PS', name: 'Palestine', flag: '\uD83C\uDDF5\uD83C\uDDF8' },
|
||
|
|
{ code: 'PA', name: 'Panama', flag: '\uD83C\uDDF5\uD83C\uDDE6' },
|
||
|
|
{ code: 'PG', name: 'Papua New Guinea', flag: '\uD83C\uDDF5\uD83C\uDDEC' },
|
||
|
|
{ code: 'PY', name: 'Paraguay', flag: '\uD83C\uDDF5\uD83C\uDDFE' },
|
||
|
|
{ code: 'PE', name: 'Peru', flag: '\uD83C\uDDF5\uD83C\uDDEA' },
|
||
|
|
{ code: 'PH', name: 'Philippines', flag: '\uD83C\uDDF5\uD83C\uDDED' },
|
||
|
|
{ code: 'PL', name: 'Poland', flag: '\uD83C\uDDF5\uD83C\uDDF1' },
|
||
|
|
{ code: 'PT', name: 'Portugal', flag: '\uD83C\uDDF5\uD83C\uDDF9' },
|
||
|
|
{ code: 'QA', name: 'Qatar', flag: '\uD83C\uDDF6\uD83C\uDDE6' },
|
||
|
|
{ code: 'RO', name: 'Romania', flag: '\uD83C\uDDF7\uD83C\uDDF4' },
|
||
|
|
{ code: 'RU', name: 'Russia', flag: '\uD83C\uDDF7\uD83C\uDDFA' },
|
||
|
|
{ code: 'RW', name: 'Rwanda', flag: '\uD83C\uDDF7\uD83C\uDDFC' },
|
||
|
|
{ code: 'KN', name: 'Saint Kitts and Nevis', flag: '\uD83C\uDDF0\uD83C\uDDF3' },
|
||
|
|
{ code: 'LC', name: 'Saint Lucia', flag: '\uD83C\uDDF1\uD83C\uDDE8' },
|
||
|
|
{ code: 'VC', name: 'Saint Vincent and the Grenadines', flag: '\uD83C\uDDFB\uD83C\uDDE8' },
|
||
|
|
{ code: 'WS', name: 'Samoa', flag: '\uD83C\uDDFC\uD83C\uDDF8' },
|
||
|
|
{ code: 'SM', name: 'San Marino', flag: '\uD83C\uDDF8\uD83C\uDDF2' },
|
||
|
|
{ code: 'ST', name: 'Sao Tome and Principe', flag: '\uD83C\uDDF8\uD83C\uDDF9' },
|
||
|
|
{ code: 'SA', name: 'Saudi Arabia', flag: '\uD83C\uDDF8\uD83C\uDDE6' },
|
||
|
|
{ code: 'SN', name: 'Senegal', flag: '\uD83C\uDDF8\uD83C\uDDF3' },
|
||
|
|
{ code: 'RS', name: 'Serbia', flag: '\uD83C\uDDF7\uD83C\uDDF8' },
|
||
|
|
{ code: 'SC', name: 'Seychelles', flag: '\uD83C\uDDF8\uD83C\uDDE8' },
|
||
|
|
{ code: 'SL', name: 'Sierra Leone', flag: '\uD83C\uDDF8\uD83C\uDDF1' },
|
||
|
|
{ code: 'SG', name: 'Singapore', flag: '\uD83C\uDDF8\uD83C\uDDEC' },
|
||
|
|
{ code: 'SK', name: 'Slovakia', flag: '\uD83C\uDDF8\uD83C\uDDF0' },
|
||
|
|
{ code: 'SI', name: 'Slovenia', flag: '\uD83C\uDDF8\uD83C\uDDEE' },
|
||
|
|
{ code: 'SB', name: 'Solomon Islands', flag: '\uD83C\uDDF8\uD83C\uDDE7' },
|
||
|
|
{ code: 'SO', name: 'Somalia', flag: '\uD83C\uDDF8\uD83C\uDDF4' },
|
||
|
|
{ code: 'ZA', name: 'South Africa', flag: '\uD83C\uDDFF\uD83C\uDDE6' },
|
||
|
|
{ code: 'KR', name: 'South Korea', flag: '\uD83C\uDDF0\uD83C\uDDF7' },
|
||
|
|
{ code: 'SS', name: 'South Sudan', flag: '\uD83C\uDDF8\uD83C\uDDF8' },
|
||
|
|
{ code: 'ES', name: 'Spain', flag: '\uD83C\uDDEA\uD83C\uDDF8' },
|
||
|
|
{ code: 'LK', name: 'Sri Lanka', flag: '\uD83C\uDDF1\uD83C\uDDF0' },
|
||
|
|
{ code: 'SD', name: 'Sudan', flag: '\uD83C\uDDF8\uD83C\uDDE9' },
|
||
|
|
{ code: 'SR', name: 'Suriname', flag: '\uD83C\uDDF8\uD83C\uDDF7' },
|
||
|
|
{ code: 'SZ', name: 'Swaziland', flag: '\uD83C\uDDF8\uD83C\uDDFF' },
|
||
|
|
{ code: 'SE', name: 'Sweden', flag: '\uD83C\uDDF8\uD83C\uDDEA' },
|
||
|
|
{ code: 'CH', name: 'Switzerland', flag: '\uD83C\uDDE8\uD83C\uDDED' },
|
||
|
|
{ code: 'SY', name: 'Syria', flag: '\uD83C\uDDF8\uD83C\uDDFE' },
|
||
|
|
{ code: 'TW', name: 'Taiwan', flag: '\uD83C\uDDF9\uD83C\uDDFC' },
|
||
|
|
{ code: 'TJ', name: 'Tajikistan', flag: '\uD83C\uDDF9\uD83C\uDDEF' },
|
||
|
|
{ code: 'TZ', name: 'Tanzania', flag: '\uD83C\uDDF9\uD83C\uDDFF' },
|
||
|
|
{ code: 'TH', name: 'Thailand', flag: '\uD83C\uDDF9\uD83C\uDDED' },
|
||
|
|
{ code: 'TL', name: 'Timor-Leste', flag: '\uD83C\uDDF9\uD83C\uDDF1' },
|
||
|
|
{ code: 'TG', name: 'Togo', flag: '\uD83C\uDDF9\uD83C\uDDEC' },
|
||
|
|
{ code: 'TO', name: 'Tonga', flag: '\uD83C\uDDF9\uD83C\uDDF4' },
|
||
|
|
{ code: 'TT', name: 'Trinidad and Tobago', flag: '\uD83C\uDDF9\uD83C\uDDF9' },
|
||
|
|
{ code: 'TN', name: 'Tunisia', flag: '\uD83C\uDDF9\uD83C\uDDF3' },
|
||
|
|
{ code: 'TR', name: 'Turkey', flag: '\uD83C\uDDF9\uD83C\uDDF7' },
|
||
|
|
{ code: 'TM', name: 'Turkmenistan', flag: '\uD83C\uDDF9\uD83C\uDDF2' },
|
||
|
|
{ code: 'TV', name: 'Tuvalu', flag: '\uD83C\uDDF9\uD83C\uDDFB' },
|
||
|
|
{ code: 'UG', name: 'Uganda', flag: '\uD83C\uDDFA\uD83C\uDDEC' },
|
||
|
|
{ code: 'UA', name: 'Ukraine', flag: '\uD83C\uDDFA\uD83C\uDDE6' },
|
||
|
|
{ code: 'AE', name: 'United Arab Emirates', flag: '\uD83C\uDDE6\uD83C\uDDEA' },
|
||
|
|
{ code: 'GB', name: 'United Kingdom', flag: '\uD83C\uDDEC\uD83C\uDDE7' },
|
||
|
|
{ code: 'US', name: 'United States', flag: '\uD83C\uDDFA\uD83C\uDDF8' },
|
||
|
|
{ code: 'UY', name: 'Uruguay', flag: '\uD83C\uDDFA\uD83C\uDDFE' },
|
||
|
|
{ code: 'UZ', name: 'Uzbekistan', flag: '\uD83C\uDDFA\uD83C\uDDFF' },
|
||
|
|
{ code: 'VU', name: 'Vanuatu', flag: '\uD83C\uDDFB\uD83C\uDDFA' },
|
||
|
|
{ code: 'VA', name: 'Vatican City', flag: '\uD83C\uDDFB\uD83C\uDDE6' },
|
||
|
|
{ code: 'VE', name: 'Venezuela', flag: '\uD83C\uDDFB\uD83C\uDDEA' },
|
||
|
|
{ code: 'VN', name: 'Vietnam', flag: '\uD83C\uDDFB\uD83C\uDDF3' },
|
||
|
|
{ code: 'YE', name: 'Yemen', flag: '\uD83C\uDDFE\uD83C\uDDEA' },
|
||
|
|
{ code: 'ZM', name: 'Zambia', flag: '\uD83C\uDDFF\uD83C\uDDF2' },
|
||
|
|
{ code: 'ZW', name: 'Zimbabwe', flag: '\uD83C\uDDFF\uD83C\uDDFC' },
|
||
|
|
]
|
||
|
|
|
||
|
|
export type Country = (typeof countries)[number]
|
||
|
|
|
||
|
|
interface CountrySelectProps {
|
||
|
|
value?: string
|
||
|
|
onChange?: (value: string) => void
|
||
|
|
placeholder?: string
|
||
|
|
disabled?: boolean
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const CountrySelect = React.forwardRef<HTMLButtonElement, CountrySelectProps>(
|
||
|
|
({ value, onChange, placeholder = 'Select country...', disabled, className }, ref) => {
|
||
|
|
const [open, setOpen] = React.useState(false)
|
||
|
|
const selectedCountry = countries.find((c) => c.code === value)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover open={open} onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
ref={ref}
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={open}
|
||
|
|
className={cn('w-full justify-between font-normal', className)}
|
||
|
|
disabled={disabled}
|
||
|
|
>
|
||
|
|
{selectedCountry ? (
|
||
|
|
<span className="flex items-center gap-2">
|
||
|
|
<span className="text-lg leading-none">{selectedCountry.flag}</span>
|
||
|
|
<span>{selectedCountry.name}</span>
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<span className="text-muted-foreground">{placeholder}</span>
|
||
|
|
)}
|
||
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||
|
|
</Button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="w-[300px] p-0">
|
||
|
|
<Command>
|
||
|
|
<CommandInput placeholder="Search country..." />
|
||
|
|
<CommandList>
|
||
|
|
<ScrollArea className="h-72">
|
||
|
|
<CommandEmpty>No country found.</CommandEmpty>
|
||
|
|
<CommandGroup>
|
||
|
|
{countries.map((country) => (
|
||
|
|
<CommandItem
|
||
|
|
key={country.code}
|
||
|
|
value={country.name}
|
||
|
|
onSelect={() => {
|
||
|
|
onChange?.(country.code)
|
||
|
|
setOpen(false)
|
||
|
|
}}
|
||
|
|
className="gap-2"
|
||
|
|
>
|
||
|
|
<span className="text-lg leading-none">{country.flag}</span>
|
||
|
|
<span className="flex-1">{country.name}</span>
|
||
|
|
<CheckIcon
|
||
|
|
className={cn(
|
||
|
|
'ml-auto h-4 w-4',
|
||
|
|
value === country.code ? 'opacity-100' : 'opacity-0'
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</ScrollArea>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
)
|
||
|
|
CountrySelect.displayName = 'CountrySelect'
|
||
|
|
|
||
|
|
export { CountrySelect, countries }
|