Rearranage components

2025-01-12 00:37:32 -08:00
parent 33dc2ca2ee
commit 1e1b1f6844
6 changed files with 17 additions and 69 deletions
@@ -0,0 +1,44 @@
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import ArticleListItem from './ArticleListItem.vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const props = defineProps({
+  articles: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['view', 'viewAll']);
+const widgetColor = useMapGetter('appConfig/getWidgetColor');
+const articlesToDisplay = computed(() => props.articles.slice(0, 6));
+
+const onArticleClick = link => {
+  emit('view', link);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 pb-4">
+    <h3 class="font-medium text-n-slate-12">
+      {{ $t('PORTAL.POPULAR_ARTICLES') }}
+    </h3>
+    <div class="flex flex-col gap-4">
+      <ArticleListItem
+        v-for="article in articlesToDisplay"
+        :key="article.slug"
+        :link="article.link"
+        :title="article.title"
+        @select-article="onArticleClick"
+      />
+    </div>
+    <button
+      class="font-medium tracking-wide inline-flex"
+      :style="{ color: widgetColor }"
+      @click="$emit('viewAll')"
+    >
+      <span>{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+    </button>
+  </div>
+</template>
@@ -0,0 +1,33 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  link: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['selectArticle']);
+
+const onClick = () => {
+  emit('selectArticle', props.link);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between rounded cursor-pointer text-n-slate-11 hover:text-n-slate-12 gap-2"
+    role="button"
+    @click="onClick"
+  >
+    <button class="underline-offset-2 leading-6 text-left">
+      {{ title }}
+    </button>
+    <span class="i-lucide-chevron-right text-base shrink-0" />
+  </div>
+</template>
@@ -0,0 +1,15 @@
+<template>
+  <div class="py-4 space-y-4">
+    <div class="space-y-2 animate-pulse">
+      <div class="h-6 bg-n-slate-7 rounded w-2/5" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-7 rounded" />
+      <div class="h-4 bg-n-slate-7 rounded" />
+      <div class="h-4 bg-n-slate-7 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-7 rounded w-1/5" />
+    </div>
+  </div>
+</template>