feat: Article table component (#5018)

app/javascript/dashboard/components/helpCenter/ArticleTable.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="article-container">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}</th>
+        </tr>
+      </thead>
+      <tr>
+        <td colspan="100%" class="horizontal-line" />
+      </tr>
+      <tbody>
+        <ArticleItem
+          v-for="article in articles"
+          :key="article.id"
+          :title="article.title"
+          :author="article.author"
+          :category="article.category"
+          :read-count="article.readCount"
+          :status="article.status"
+          :updated-at="article.updatedAt"
+        />
+      </tbody>
+    </table>
+    <table-footer
+      :on-page-change="onPageChange"
+      :current-page="Number(currentPage)"
+      :total-count="articleCount"
+    />
+  </div>
+</template>
+
+<script>
+import ArticleItem from './ArticleItem.vue';
+import TableFooter from 'dashboard/components/widgets/TableFooter';
+export default {
+  components: {
+    ArticleItem,
+    TableFooter,
+  },
+  props: {
+    articles: {
+      type: Array,
+      default: () => {},
+    },
+    articleCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  methods: {
+    onPageChange() {
+      this.$emit('onPageChange');
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.article-container {
+  width: 100%;
+
+  table thead th {
+    font-weight: var(--font-weight-bold);
+    text-transform: capitalize;
+    color: var(--s-700);
+    font-size: var(--font-size-small);
+    padding-left: 0;
+  }
+  .horizontal-line {
+    border-bottom: 1px solid var(--color-border);
+  }
+  .footer {
+    padding: 0;
+  }
+}
+</style>