98 lines
2.1 KiB
TypeScript
98 lines
2.1 KiB
TypeScript
|
|
|
|
|
|
// ISO 3166-1 alpha-2 country code to full country name mapping
|
|
const countryNames: Record<string, string> = {
|
|
'US': 'United States',
|
|
'GB': 'United Kingdom',
|
|
'CA': 'Canada',
|
|
'AU': 'Australia',
|
|
'NZ': 'New Zealand',
|
|
'DE': 'Germany',
|
|
'FR': 'France',
|
|
'IT': 'Italy',
|
|
'ES': 'Spain',
|
|
'NL': 'Netherlands',
|
|
'BE': 'Belgium',
|
|
'SE': 'Sweden',
|
|
'NO': 'Norway',
|
|
'DK': 'Denmark',
|
|
'FI': 'Finland',
|
|
'PL': 'Poland',
|
|
'CZ': 'Czech Republic',
|
|
'AT': 'Austria',
|
|
'CH': 'Switzerland',
|
|
'PT': 'Portugal',
|
|
'IE': 'Ireland',
|
|
'BR': 'Brazil',
|
|
'MX': 'Mexico',
|
|
'AR': 'Argentina',
|
|
'JP': 'Japan',
|
|
'CN': 'China',
|
|
'KR': 'South Korea',
|
|
'IN': 'India',
|
|
'SG': 'Singapore',
|
|
'TH': 'Thailand',
|
|
'MY': 'Malaysia',
|
|
'ID': 'Indonesia',
|
|
'PH': 'Philippines',
|
|
'ZA': 'South Africa',
|
|
'RU': 'Russia',
|
|
'MC': 'Monaco',
|
|
'TR': 'Turkey',
|
|
'GR': 'Greece',
|
|
'HU': 'Hungary',
|
|
'RO': 'Romania',
|
|
'BG': 'Bulgaria',
|
|
'HR': 'Croatia',
|
|
'SI': 'Slovenia',
|
|
'SK': 'Slovakia',
|
|
'LT': 'Lithuania',
|
|
'LV': 'Latvia',
|
|
'EE': 'Estonia',
|
|
};
|
|
|
|
// ISO 3166-1 alpha-2 country code to flag emoji conversion
|
|
const countryCodeToFlag = (countryCode: string): string => {
|
|
if (!countryCode || countryCode.length !== 2) return '🏁';
|
|
|
|
// Convert ISO 3166-1 alpha-2 to regional indicator symbols
|
|
const codePoints = countryCode
|
|
.toUpperCase()
|
|
.split('')
|
|
.map(char => 127397 + char.charCodeAt(0));
|
|
return String.fromCodePoint(...codePoints);
|
|
};
|
|
|
|
interface CountryFlagProps {
|
|
countryCode: string;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
className?: string;
|
|
showTooltip?: boolean;
|
|
}
|
|
|
|
export function CountryFlag({
|
|
countryCode,
|
|
size = 'md',
|
|
className = '',
|
|
showTooltip = true
|
|
}: CountryFlagProps) {
|
|
const sizeClasses = {
|
|
sm: 'text-xs',
|
|
md: 'text-sm',
|
|
lg: 'text-base'
|
|
};
|
|
|
|
const flag = countryCodeToFlag(countryCode);
|
|
const countryName = countryNames[countryCode.toUpperCase()] || countryCode;
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center relative ${sizeClasses[size]} ${className}`}
|
|
title={showTooltip ? countryName : undefined}
|
|
>
|
|
<span className="select-none">{flag}</span>
|
|
</span>
|
|
);
|
|
}
|