<template> <div class="flex flex-col w-full max-h-72 h-fit overflow-hidden"> <NuxtPicture v-if="data?.banner" loading="lazy" class="w-full h-60 object-cover object-center" :src="baseUrl + data?.banner.url" :imgAttrs="{ class: 'w-full h-60 object-cover object-center' }" /> <div v-if="data?.title" primary class="h-12 min-h-12 w-full px-12 justify-center items-center gap-5 flex"> <p>{{ data.title }}</p> </div> </div> </template> <script setup lang="ts"> import type { PropType } from "vue"; import type ItemsHero from "../../types/component/items/hero"; defineProps({ data: Object as PropType<ItemsHero>, }); const runtimeConfig = useRuntimeConfig(); const baseUrl = runtimeConfig.public.strapi.url; </script>