ff-webpage/components/dynamicZone/FileDownload.vue

<template>
  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
    <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')"
      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"
      target="_blank"
      class="w-fit text-primary underline"
    >
      Datei herunterladen
    </a>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type DynamicZoneFileDownload from "../../types/component/dynamic-zone/fileDownload";

const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.strapi.url;

const props = defineProps({
  data: Object as PropType<DynamicZoneFileDownload>,
});

const showComponent = computed(() => {
  if (props.data?.file.mime == "application/pdf" || props.data?.file.mime.includes("image")) {
    return true;
  } else {
    return props.data?.enable_download;
  }
});
</script>