feat: Add new Locale page (#10275)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue

@@ -0,0 +1,23 @@
+<script setup>
+import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
+
+defineProps({
+  locales: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <ul role="list" class="w-full h-full space-y-4">
+    <LocaleCard
+      v-for="(locale, index) in locales"
+      :key="index"
+      :locale="locale.name"
+      :is-default="locale.isDefault"
+      :article-count="locale.articleCount"
+      :category-count="locale.categoryCount"
+    />
+  </ul>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue

@@ -0,0 +1,52 @@
+<script setup>
+import LocalesPage from './LocalesPage.vue';
+
+const locales = [
+  {
+    name: 'English (en-US)',
+    isDefault: true,
+    articleCount: 5,
+    categoryCount: 5,
+  },
+  {
+    name: 'Spanish (es-ES)',
+    isDefault: false,
+    articleCount: 20,
+    categoryCount: 10,
+  },
+  {
+    name: 'English (en-UK)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+  {
+    name: 'Malay (ms-MY)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+  {
+    name: 'Malayalam (ml-IN)',
+    isDefault: false,
+    articleCount: 10,
+    categoryCount: 5,
+  },
+  {
+    name: 'Hindi (hi-IN)',
+    isDefault: false,
+    articleCount: 15,
+    categoryCount: 7,
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
+    <Variant title="All Locales">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+        <LocalesPage :locales="locales" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from 'vue';
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
+
+const props = defineProps({
+  locales: {
+    type: Array,
+    required: true,
+  },
+});
+
+const localeCount = computed(() => props.locales?.length);
+
+// TODO: remove comments
+// eslint-disable-next-line no-unused-vars
+const handleTabChange = tab => {
+  // TODO: Implement tab change logic
+};
+// eslint-disable-next-line no-unused-vars
+const handlePageChange = page => {
+  // TODO: Implement page change logic
+};
+</script>
+
+<template>
+  <HelpCenterLayout :show-pagination-footer="false">
+    <template #header-actions>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
+          </span>
+        </div>
+        <Button
+          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
+          icon="add"
+          size="sm"
+        />
+      </div>
+    </template>
+    <template #content>
+      <LocaleList :locales="locales" />
+    </template>
+  </HelpCenterLayout>
+</template>

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -477,6 +477,10 @@
         }
       }
     },
-    "LOADING": "Loading..."
+    "LOADING": "Loading...",
+    "LOCALES_PAGE": {
+      "LOCALES_COUNT": "No locales available | {n} locale | {n} locales",
+      "NEW_LOCALE_BUTTON_TEXT": "New locale"
+    }
   }
 }