wip

apps/website/components/ui/CountrySelect.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import { Globe, Search, ChevronDown, Check } from 'lucide-react';
+import CountryFlag from './CountryFlag';
 
 export interface Country {
   code: string;
@@ -51,14 +52,6 @@ export const COUNTRIES: Country[] = [
   { code: 'UA', name: 'Ukraine' },
 ];
 
-function getCountryFlag(countryCode: string): string {
-  const code = countryCode.toUpperCase();
-  if (code.length === 2) {
-    const codePoints = [...code].map(char => 127397 + char.charCodeAt(0));
-    return String.fromCodePoint(...codePoints);
-  }
-  return '🏁';
-}
 
 interface CountrySelectProps {
   value: string;
@@ -130,7 +123,7 @@ export default function CountrySelect({
           <Globe className="w-4 h-4 text-gray-500" />
           {selectedCountry ? (
             <span className="flex items-center gap-2">
-              <span className="text-lg">{getCountryFlag(selectedCountry.code)}</span>
+              <CountryFlag countryCode={selectedCountry.code} size="md" showTooltip={false} />
               <span>{selectedCountry.name}</span>
             </span>
           ) : (
@@ -173,7 +166,7 @@ export default function CountrySelect({
                   }`}
                 >
                   <span className="flex items-center gap-3">
-                    <span className="text-lg">{getCountryFlag(country.code)}</span>
+                    <CountryFlag countryCode={country.code} size="md" showTooltip={false} />
                     <span>{country.name}</span>
                   </span>
                   {value === country.code && (