feat: replace emoji flags with SVG flag images in LanguageSwitcher

src/components/LanguageSwitcher.tsx

@@ -4,11 +4,11 @@ import { useLocale } from 'next-intl'
 import { useRouter, usePathname } from '@/navigation'
 import { routing } from '@/i18n/routing'
 
-const FLAGS: Record<string, string> = {
-  en: '🇺🇸',
-  fr: '🇫🇷',
-  es: '🇪🇸',
-  it: '🇮🇹',
+const FLAG_LABELS: Record<string, string> = {
+  en: 'English',
+  fr: 'Français',
+  es: 'Español',
+  it: 'Italiano',
 }
 
 export function LanguageSwitcher() {
@@ -17,21 +17,26 @@ export function LanguageSwitcher() {
   const pathname = usePathname()
 
   return (
-    <div style={{ display: 'flex', gap: '0.5rem', padding: '0.5rem 2rem' }}>
+    <div className="flex items-center gap-1">
       {routing.locales.map((loc) => (
         <button
           key={loc}
           onClick={() => router.replace(pathname, { locale: loc })}
-          aria-label={loc}
-          style={{
-            fontSize: '1.5rem',
-            background: 'none',
-            border: 'none',
-            cursor: 'pointer',
-            opacity: loc === locale ? 1 : 0.4,
-          }}
+          aria-label={FLAG_LABELS[loc]}
+          className={[
+            'rounded transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500',
+            loc === locale
+              ? 'opacity-100 ring-2 ring-violet-500 ring-offset-1 ring-offset-white dark:ring-offset-slate-950'
+              : 'opacity-40 hover:opacity-70',
+          ].join(' ')}
         >
-          {FLAGS[loc]}
+          <img
+            src={`/flags/${loc}.svg`}
+            alt={FLAG_LABELS[loc]}
+            width={28}
+            height={20}
+            className="rounded-sm block"
+          />
         </button>
       ))}
     </div>