PhoneCountryPicker

import { useState } from 'react';
import {
  Dropdown,
  PhoneCountryPicker,
  type PhoneCountryOption,
} from 'twenty-ui/components';

const COUNTRIES: PhoneCountryOption[] = [
  { value: 'FR', label: 'France', callingCode: '33', flag: '🇫🇷' },
  { value: 'GB', label: 'United Kingdom', callingCode: '44', flag: '🇬🇧' },
  { value: 'US', label: 'United States', callingCode: '1', flag: '🇺🇸' },
];

export const PhoneCountryExample = () => {
  const [value, setValue] = useState('FR');

  return (
    <Dropdown.Root type="picker">
      <PhoneCountryPicker.Trigger
        aria-label="Phone country"
        country={COUNTRIES.find((country) => country.value === value)}
      />
      <Dropdown.Content width={280}>
        <PhoneCountryPicker.Options
          countries={COUNTRIES}
          value={value}
          onValueChange={setValue}
          searchLabel="Search countries"
          emptyLabel="No countries found"
        />
      </Dropdown.Content>
    </Dropdown.Root>
  );
};