ff-webpage/components/CollectionDetail.vue

<template>
  <div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12">
    <h1>{{ data?.title }}</h1>
    <p>
      {{
        new Date(data?.date ?? "").toLocaleString("de-DE", {
          day: "2-digit",
          month: "long",
          year: "numeric",
          minute: "2-digit",
          hour: "2-digit",
        })
      }}
    </p>
    <br />
    <p>{{ data?.description }}</p>
    <br />
    <NuxtPicture
      v-if="data?.image"
      loading="lazy"
      class="w-fit h-[50vh] max-w-full object-cover object-center"
      :src="baseUrl + data.image.url"
      :imgAttrs="{ class: 'w-fit h-[50vh] max-w-full object-cover object-center' }"
    />
    <br v-if="data?.image" />
    <div v-if="data?.content">
      <p>Bericht:</p>
      <FieldContent :data="data.content" />
    </div>
    <br />
    <div v-if="data?.attachment">
      <p>Anhang:</p>
      <div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
        <NuxtPicture
          v-for="img in data.attachment"
          loading="lazy"
          class="w-fit h-48 object-cover object-center"
          :src="baseUrl + img.url"
          :imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type Article from "../types/collection/article";
import type Operation from "../types/collection/operation";
import type Event from "../types/collection/event";
import type Vehicle from "../types/collection/vehicle";

const baseUrl = useStrapiUrl().replace("/api", "");

defineProps({
  data: Object as PropType<Article | Operation | Event | Vehicle>,
});
</script>