ff-webpage/components/dynamicZone/ColumnImageText.vue

<template>
  <div class="flex flex-col md:flex-row gap-8 md:gap-4">
    <NuxtPicture
      loading="lazy"
      class="w-full md:w-1/2 min-w-[50%] object-cover object-center"
      :class="data?.image_left ? 'order-0' : 'order-1'"
      :src="baseUrl + data?.image.url"
      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
    />
    <FieldContent :data="data?.text" />
  </div>
</template>

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

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

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