ff-webpage/components/dynamicZone/EmphasiseArticle.vue

<template>
  <div class="w-full flex flex-col justify-center">
    <h1 class="text-center">{{ data?.titel }}</h1>
    <p class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
    <br />
    <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 :data="item" :allow-navigation="true" :url-overwrite="data?.base_url" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneEmphasiseArticle from "../../types/component/dynamicZoneEmphasiseArticle";

defineProps({
  data: Object as PropType<DynamicZoneEmphasiseArticle>,
});
</script>