From 143c015bbdc8fe1ed5b1bf1e8bb18984a75791ca Mon Sep 17 00:00:00 2001
From: Alex <a.hywax@gmail.com>
Date: Tue, 19 Nov 2024 19:33:01 +0500
Subject: [PATCH] docs(i18n): display supported languages in a table (#2684)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .../components/content/SupportedLanguages.vue | 50 +++++++++++++++----
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/docs/app/components/content/SupportedLanguages.vue b/docs/app/components/content/SupportedLanguages.vue
index 89e210c5..6093d7e8 100644
--- a/docs/app/components/content/SupportedLanguages.vue
+++ b/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>