feat: Add the new design for article page (#10273)

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue

@@ -0,0 +1,25 @@
+<script setup>
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+
+defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <ul role="list" class="w-full h-full space-y-4">
+    <ArticleCard
+      v-for="article in articles"
+      :key="article.title"
+      :title="article.title"
+      :status="article.status"
+      :author="article.author"
+      :category="article.category"
+      :views="article.views"
+      :updated-at="article.updatedAt"
+    />
+  </ul>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue

@@ -0,0 +1,72 @@
+<script setup>
+import ArticlesPage from './ArticlesPage.vue';
+
+const articles = [
+  {
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: '2 days ago',
+    author: 'Michael',
+    category: '⚡️ Marketing',
+    views: 3400,
+  },
+  {
+    title: 'Setting up your first Help Center portal',
+    status: '',
+    updatedAt: '1 week ago',
+    author: 'John',
+    category: '🛠️ Development',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Customizing the appearance of your Help Center',
+    status: '',
+    updatedAt: '5 days ago',
+    author: 'Jane',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Customizing the appearance of your Help Center',
+    status: '',
+    updatedAt: '5 days ago',
+    author: 'Jane',
+    category: '💰 Finance',
+    views: 400,
+  },
+  {
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: '3 days ago',
+    author: 'Fernando',
+    category: '💰 Finance',
+    views: 400,
+  },
+];
+</script>
+
+<template>
+  <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
+    <Variant title="All Articles">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+        <ArticlesPage :articles="articles" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -0,0 +1,74 @@
+<script setup>
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+
+defineProps({
+  articles: {
+    type: Array,
+    required: true,
+  },
+});
+
+const tabs = [
+  { label: 'All articles', count: 24 },
+  { label: 'Mine', count: 13 },
+  { label: 'Draft', count: 5 },
+  { label: 'Archived', count: 11 },
+];
+// 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
+    :current-page="1"
+    :total-items="100"
+    :items-per-page="10"
+    @update:current-page="handlePageChange"
+  >
+    <template #header-actions>
+      <div class="flex items-end justify-between">
+        <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
+          <TabBar
+            :tabs="tabs"
+            :initial-active-tab="1"
+            @tab-changed="handleTabChange"
+          />
+          <div class="flex items-start justify-between w-full gap-2">
+            <div class="flex items-center gap-2">
+              <Button
+                label="English"
+                size="sm"
+                icon-position="right"
+                icon="chevron-lucide-down"
+                icon-lib="lucide"
+                variant="secondary"
+              />
+              <Button
+                label="All categories"
+                size="sm"
+                icon-position="right"
+                icon="chevron-lucide-down"
+                icon-lib="lucide"
+                variant="secondary"
+              />
+            </div>
+            <Button label="New article" icon="add" size="sm" />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <ArticleList :articles="articles" />
+    </template>
+  </HelpCenterLayout>
+</template>