first commit

resources/js/views/pages/help-center/HelpCenterLandingKnowledgeBase.vue

@@ -0,0 +1,97 @@
+<script setup>
+const props = defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <VRow>
+    <VCol
+      v-for="article in props.categories"
+      :key="article.title"
+      cols="12"
+      sm="6"
+      lg="4"
+    >
+      <VCard>
+        <VCardItem class="pb-6">
+          <div class="d-flex align-center">
+            <VAvatar
+              rounded
+              color="primary"
+              variant="tonal"
+              class="me-3"
+              size="32"
+            >
+              <VIcon
+                :icon="article.icon"
+                size="20"
+              />
+            </VAvatar>
+            <VCardTitle>{{ article.title }}</VCardTitle>
+          </div>
+        </VCardItem>
+
+        <VCardText>
+          <VList class="card-list">
+            <VListItem
+              v-for="(item, index) in article.articles"
+              :key="index"
+            >
+              <RouterLink
+                :to="{
+                  name: 'front-pages-help-center-article-title',
+                  params: {
+                    title: 'how-to-add-product-in-cart',
+                  },
+                }"
+                class="text-high-emphasis"
+              >
+                {{ item.title }}
+              </RouterLink>
+
+              <template #append>
+                <VIcon
+                  icon="ri-arrow-right-s-line"
+                  size="20"
+                  class="text-disabled"
+                />
+              </template>
+            </VListItem>
+          </VList>
+
+          <div class="text-base font-weight-medium mt-4 d-flex align-center gap-x-3">
+            <RouterLink
+              :to="{
+                name: 'front-pages-help-center-article-title',
+                params: {
+                  title: 'how-to-add-product-in-cart',
+                },
+              }"
+            >
+              <div class="d-flex align-center gap-x-3">
+                <div>
+                  See all {{ article.articles.length }} Articles
+                </div>
+                <VIcon
+                  icon="ri-arrow-right-line"
+                  size="18"
+                  color="primary"
+                />
+              </div>
+            </RouterLink>
+          </div>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss">
+.card-list {
+  --v-card-list-gap: 0.5rem;
+}
+</style>