From 69fd756a5ad2e9e80377c3ebc236a413904e89a5 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Sat, 18 Jan 2025 11:39:03 +0100
Subject: [PATCH] embedding

---
 components/ContentBuilder.vue           |  1 +
 components/dynamicZone/Embedding.vue    | 15 +++++++++++++++
 components/dynamicZone/FileDownload.vue |  2 +-
 types/component/baseComponent.ts        |  7 +++++--
 types/component/dynamicZoneEmbedding.ts |  7 +++++++
 5 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 components/dynamicZone/Embedding.vue
 create mode 100644 types/component/dynamicZoneEmbedding.ts

diff --git a/components/ContentBuilder.vue b/components/ContentBuilder.vue
index d52d322..b165712 100644
--- a/components/ContentBuilder.vue
+++ b/components/ContentBuilder.vue
@@ -10,6 +10,7 @@
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
         <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
+        <DynamicZoneEmbedding v-else-if="item.__component == 'dynamic-zone.embedding'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
         <br />
       </div>
diff --git a/components/dynamicZone/Embedding.vue b/components/dynamicZone/Embedding.vue
new file mode 100644
index 0000000..6ba036a
--- /dev/null
+++ b/components/dynamicZone/Embedding.vue
@@ -0,0 +1,15 @@
+<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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneEmbedding from "../../types/component/dynamicZoneEmbedding";
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneEmbedding>,
+});
+</script>
diff --git a/components/dynamicZone/FileDownload.vue b/components/dynamicZone/FileDownload.vue
index 185d794..5013dd3 100644
--- a/components/dynamicZone/FileDownload.vue
+++ b/components/dynamicZone/FileDownload.vue
@@ -1,6 +1,6 @@
 <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>
+    <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>
     <NuxtPicture
       v-if="data.file.mime.includes('image')"
diff --git a/types/component/baseComponent.ts b/types/component/baseComponent.ts
index 747253c..84ff7c2 100644
--- a/types/component/baseComponent.ts
+++ b/types/component/baseComponent.ts
@@ -6,6 +6,7 @@ import type DynamicZoneFullText from "./dynamicZoneFullText";
 import type DynamicZoneGallery from "./dynamicZoneGallery";
 import type DynamicZoneFileDownload from "./dynamicZoneFileDownload";
 import type SharedList from "./sharedList";
+import type DynamicZoneEmbedding from "./dynamicZoneEmbedding";
 
 export default interface BaseComponent {
   __component: ComponentNames;
@@ -20,7 +21,8 @@ export type ComponentNames =
   | "dynamic-zone.emphasise-article"
   | "dynamic-zone.dual-column-text"
   | "dynamic-zone.column-image-text"
-  | "dynamic-zone.file-download";
+  | "dynamic-zone.file-download"
+  | "dynamic-zone.embedding";
 
 export type ComponentTypes =
   | SharedList
@@ -30,4 +32,5 @@ export type ComponentTypes =
   | DynamicZoneEmphasiseArticle
   | DynamicZoneDualColumnText
   | DynamicZoneColumnImageText
-  | DynamicZoneFileDownload;
+  | DynamicZoneFileDownload
+  | DynamicZoneEmbedding;
diff --git a/types/component/dynamicZoneEmbedding.ts b/types/component/dynamicZoneEmbedding.ts
new file mode 100644
index 0000000..79bac7b
--- /dev/null
+++ b/types/component/dynamicZoneEmbedding.ts
@@ -0,0 +1,7 @@
+import type BaseComponent from "./baseComponent";
+
+export default interface DynamicZoneEmbedding extends BaseComponent {
+  __component: "dynamic-zone.embedding";
+  title: string;
+  link: string;
+}