docs(SupportedLanguages): improve emojis

docs/app/components/content/SupportedLanguages.vue

@@ -1,27 +1,37 @@
 <script setup lang="ts">
-import type { Locale } from '@nuxt/ui'
 import * as locales from '@nuxt/ui/locale'
 
-type LocaleKey = keyof typeof locales
-type LocaleComputed = Locale & { flag: string }
-
 const props = withDefaults(defineProps<{
   default?: string
 }>(), {
   default: 'en'
 })
 
-const countries = await $fetch('/api/locales.json')
-
-const getLocaleKeys = Object.keys(locales) as LocaleKey[]
-const localesList = getLocaleKeys.map<LocaleComputed>((code) => {
-  const locale: Locale = locales[code]
-
-  return {
-    ...locale,
-    flag: countries[locale.code] || ''
+function getEmojiFlag(locale: string): string {
+  // Map language codes to default country codes
+  const languageToCountry: Record<string, string> = {
+    en: 'gb',
+    ar: 'sa',
+    cs: 'cz',
+    zh: 'cn',
+    ja: 'jp',
+    ko: 'kr'
   }
-})
+
+  // Get base language code before any region specifier
+  const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
+
+  // Use mapped country code or extract from locale if it contains a region
+  const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, '').slice(0, 2)
+
+  return countryCode
+    .split('')
+    .map((char: string) => {
+      const codePoint = char.toUpperCase().codePointAt(0)
+      return codePoint ? String.fromCodePoint(0x1F1A5 + codePoint) : ''
+    })
+    .join('')
+}
 </script>
 
 <!-- eslint-disable vue/singleline-html-element-content-newline -->
@@ -31,9 +41,12 @@ const localesList = getLocaleKeys.map<LocaleComputed>((code) => {
       By default, the <ProseCode>{{ props.default }}</ProseCode> locale is used.
     </ProseP>
     <div class="grid gap-6 grid-cols-2 md:grid-cols-3">
-      <div v-for="locale in localesList" :key="locale.code">
+      <div v-for="locale in locales" :key="locale.code">
         <div class="flex gap-3 items-center">
-          <UAvatar :text="locale.flag" size="xl" />
+          <UAvatar size="xl">
+            {{ getEmojiFlag(locale.code) }}
+          </UAvatar>
+
           <div class="text-sm">
             <div class="font-semibold">{{ locale.name }}</div>
             <div class="mt-1">Code: <ProseCode class="text-xs">{{ locale.code }}</ProseCode></div>