docs(i18n): display supported languages in a cards (#2709)

docs/app/components/content/SupportedLanguages.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import * as locales from '@nuxt/ui/locale'
 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
@@ -10,8 +11,17 @@ const props = withDefaults(defineProps<{
   default: 'en'
 })
 
+const countries = await $fetch('/api/locales.json')
+
 const getLocaleKeys = Object.keys(locales) as LocaleKey[]
-const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, locales[locale]])
+const localesList = getLocaleKeys.map<LocaleComputed>((code) => {
+  const locale: Locale = locales[code]
+
+  return {
+    ...locale,
+    flag: countries[locale.code] || ''
+  }
+})
 </script>
 
 <!-- eslint-disable vue/singleline-html-element-content-newline -->
@@ -20,38 +30,17 @@ const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, lo
     <ProseP>
       By default, the <ProseCode>{{ props.default }}</ProseCode> locale is used.
     </ProseP>
-    <ProseTable>
-      <ProseThead>
-        <ProseTr>
-          <ProseTh>
-            Language
-          </ProseTh>
-          <ProseTh>
-            Code
-          </ProseTh>
-          <ProseTh>
-            Direction
-          </ProseTh>
-        </ProseTr>
-      </ProseThead>
-      <ProseTbody>
-        <ProseTr v-for="[key, locale] in localesList" :key="key">
-          <ProseTd>
-            {{ locale.name }}
-          </ProseTd>
-          <ProseTd>
-            <ProseCode>
-              {{ locale.code }}
-            </ProseCode>
-          </ProseTd>
-          <ProseTd>
-            <ProseCode>
-              {{ locale.dir }}
-            </ProseCode>
-          </ProseTd>
-        </ProseTr>
-      </ProseTbody>
-    </ProseTable>
+    <div class="grid gap-6 grid-cols-2 md:grid-cols-3">
+      <div v-for="locale in localesList" :key="locale.code">
+        <div class="flex gap-3 items-center">
+          <UAvatar :text="locale.flag" size="xl" />
+          <div class="text-sm">
+            <div class="font-semibold">{{ locale.name }}</div>
+            <div class="mt-1">Code: <ProseCode class="text-xs">{{ locale.code }}</ProseCode></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <ProseNote to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
       If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>.
     </ProseNote>