docs(i18n): display supported languages in a table (#2684)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/content/SupportedLanguages.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import * as locales from '@nuxt/ui/locale'
+import type { Locale } from '@nuxt/ui'
+
+type LocaleKey = keyof typeof locales
 
 const props = withDefaults(defineProps<{
   default?: string
@@ -7,21 +10,48 @@ const props = withDefaults(defineProps<{
   default: 'en'
 })
 
-const getLocaleKeys = () => Object.keys(locales) as Array<keyof typeof locales>
-const localesList = getLocaleKeys().map(locale => [locale, locales[locale].name])
+const getLocaleKeys = Object.keys(locales) as LocaleKey[]
+const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, locales[locale]])
 </script>
 
 <!-- eslint-disable vue/singleline-html-element-content-newline -->
 <template>
   <div>
-    <ProseUl>
-      <ProseLi v-for="[key, label] in localesList" :key="key">
-        <ProseCode>{{ key }}</ProseCode> - {{ label }}
-        <template v-if="key === props.default">
-          (default)
-        </template>
-      </ProseLi>
-    </ProseUl>
+    <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>
     <Note 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>.
     </Note>