Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 111x 3x 2220x | import { Select } from "../ui/select";
import { COUNTRY_CODES } from "./country-codes";
type CountryCodeSelectProps = {
value: string;
onChange: (code: string) => void;
};
/**
* Composed from the `Select` primitive rather than a hand-rolled `<select>`:
* the primitive carries the field stroke, the three control tiers and the
* 44px touch floor under a coarse pointer, none of which this file should be
* re-deciding. Dense tier, because it sits inline next to a textarea.
*/
export function CountryCodeSelect({ value, onChange }: CountryCodeSelectProps) {
return (
<Select
tier="dense"
value={value}
onChange={(e) => onChange(e.target.value)}
aria-label="Country code"
className="min-w-22"
>
{/*
* Options as children rather than through the `options` prop: two
* entries share the dialling code 1 (US and Canada), so the key has
* to be code + name. The prop keys on the value.
*/}
{COUNTRY_CODES.map((c) => (
<option key={`${c.code}-${c.name}`} value={c.code}>
{c.flag} +{c.code}
</option>
))}
</Select>
);
}
|