phongdt:page video

components/article/Event.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{ events: any[] }>()
+</script>
+
+<template>
+    <div v-if="events?.length" class="mt-6">
+        <h3 class="text-xl font-semibold after:content-[':']">Sự kiện</h3>
+        <ul class="flex flex-col gap-2 list-disc ml-4 my-2 pl-3 flex-wrap">
+            <li v-for="(event, index) in events" :key="index" class="font-semibold text-primary-100">
+                <nuxt-link :to="{ name: 'event-eventSlug', params: { eventSlug: event.code } }">{{ event.title }}</nuxt-link>
+            </li>
+        </ul>
+    </div>
+</template>

components/article/Tag.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{ tags?: any[] }>();
+
+</script>
+
+<template>
+    <div v-if="tags?.length"
+        class="flex flex-col items-center justify-between gap-6 sm:flex-row mt-6">
+        <div id="article-tags" class="flex order-2 gap-4 xl:order-1">
+            <h3 class="text-xl font-semibold after:content-[':']">Tag</h3>
+            <div class="flex items-center gap-4 flex-wrap">
+                <template v-for="(item, index) in tags" :key="index">
+                    <div v-if="item.code">
+                        <nuxt-link :to="{ name: 'tag-tagSlug', params:{ tagSlug: item.code } }" class="text-blue-500 hover:text-blue-600">
+                        {{ item?.title }}
+                    </nuxt-link>
+                    </div>
+                </template>
+
+            </div>
+        </div>
+    </div>
+</template>

components/article/Topic.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{topics?: any[]}>()
+</script>
+<template>
+    <div v-if="topics?.length" class="flex flex-col items-center justify-between gap-6 sm:flex-row mt-6">
+        <div class="flex order-2 gap-4 xl:order-1">
+            <h3 class="text-xl font-semibold after:content-[':'] whitespace-nowrap">Chủ đề</h3>
+            <div class="flex items-center gap-4 flex-wrap">
+                <NuxtLink v-for="(item, index) in topics" :key="index" :to="{ name:'topic-topicSlug', params:{ topicSlug: item.code } }" class="text-blue-500 hover:text-blue-600">
+                    {{ item?.title }},
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>