component formatting and types

components/dynamicZone/ColumnImageText.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneColumnImageText from "../../types/component/dynamicZoneColumnImageText";
+import type DynamicZoneColumnImageText from "../../types/component/dynamic-zone/columnImageText";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

components/dynamicZone/DualColumnText.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneDualColumnText from "../../types/component/dynamicZoneDualColumnText";
+import type DynamicZoneDualColumnText from "../../types/component/dynamic-zone/dualColumnText";
 
 defineProps({
   data: Object as PropType<DynamicZoneDualColumnText>,

components/dynamicZone/Embedding.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
-    <h1 class="text-center">{{ data.title }}</h1>
-    <iframe :src="data.link" class="w-full h-[90vh]"></iframe>
+    <iframe :src="data?.link" class="w-full h-[90vh]"></iframe>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneEmbedding from "../../types/component/dynamicZoneEmbedding";
+import type DynamicZoneEmbedding from "../../types/component/dynamic-zone/embedding";
 
 const props = defineProps({
   data: Object as PropType<DynamicZoneEmbedding>,

components/dynamicZone/EmphasiseArticle.vue

@@ -1,21 +0,0 @@
-<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>

components/dynamicZone/FileDownload.vue

@@ -1,18 +1,17 @@
 <template>
   <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
-    <h1 class="text-center">{{ data.title }}</h1>
-    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <iframe v-if="data?.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
     <NuxtPicture
-      v-if="data.file.mime.includes('image')"
+      v-if="data?.file.mime.includes('image')"
       loading="lazy"
       class="w-full object-cover object-center mx-auto"
       :src="baseUrl + data?.file.url"
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <a
-      v-if="data.enable_download"
-      :href="baseUrl + data.file.url"
-      :download="data.file.name"
+      v-if="data?.enable_download"
+      :href="baseUrl + data?.file.url"
+      :download="data?.file.name"
       target="_blank"
       class="w-fit text-primary underline"
     >
@@ -23,7 +22,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fileDownload";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;
@@ -33,10 +32,10 @@ const props = defineProps({
 });
 
 const showComponent = computed(() => {
-  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+  if (props.data?.file.mime == "application/pdf" || props.data?.file.mime.includes("image")) {
     return true;
   } else {
-    return props.data.enable_download;
+    return props.data?.enable_download;
   }
 });
 </script>

components/dynamicZone/FullImage.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullImage from "../../types/component/dynamicZoneFullImage";
+import type DynamicZoneFullImage from "../../types/component/dynamic-zone/fullImage";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

components/dynamicZone/FullText.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneFullText from "../../types/component/dynamicZoneFullText";
+import type DynamicZoneFullText from "../../types/component/dynamic-zone/fullText";
 
 defineProps({
   data: Object as PropType<DynamicZoneFullText>,

components/dynamicZone/Gallery.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
-import type DynamicZoneGallery from "../../types/component/dynamicZoneGallery";
+import type DynamicZoneGallery from "../../types/component/dynamic-zone/gallery";
 
 const runtimeConfig = useRuntimeConfig();
 const baseUrl = runtimeConfig.public.strapi.url;

components/dynamicZone/Section.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1 class="text-center">{{ data?.title }}</h1>
+  <p v-if="data?.description" class="text-center text-[#5c5c5c]">{{ data?.description }}</p>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSection from "../../types/component/dynamic-zone/section";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSection>,
+});
+</script>

components/dynamicZone/Spacer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-primary h-2 rounded-full w-48 mx-auto"></div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneSpacer from "../../types/component/dynamic-zone/spacer";
+
+defineProps({
+  data: Object as PropType<DynamicZoneSpacer>,
+});
+</script>