component formatting and types

components/shared/EmphasiseArticle.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full flex flex-col justify-center">
+    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
+      <div v-for="item in data?.articles" :key="item.slug" class="contents">
+        <BaseListImageItem
+          v-if="articleLookup?.show_image"
+          :data="item"
+          :allow-navigation="articleLookup.enable_detail"
+          :url-overwrite="data?.link_to_articles"
+        />
+        <BaseListItem
+          v-else-if="articleLookup"
+          :data="item"
+          :allow-navigation="articleLookup.enable_detail"
+          :url-overwrite="data?.link_to_articles"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type SharedEmphasiseArticle from "../../types/component/shared/emphasiseArticle";
+import type Lookup from "../../types/collection/lookup";
+
+const { find } = useStrapi();
+const { data: lookup } = await useAsyncData("lookup", () =>
+  find<Lookup>("collection-lookups", {
+    filters: {
+      collection: "articles",
+    },
+  })
+);
+const articleLookup = ref(lookup.value?.data[0]);
+
+defineProps({
+  data: Object as PropType<SharedEmphasiseArticle>,
+});
+</script>