nocodb/packages/nc-gui/components/general/FormBanner.vue

<script lang="ts" setup>
interface Props {
  bannerImageUrl?: string | null
}
const { bannerImageUrl } = defineProps<Props>()

const { getPossibleAttachmentSrc } = useAttachment()
</script>

<template>
  <div
    class="nc-form-banner-wrapper w-full max-w-screen-xl mx-auto bg-white border-1 border-gray-200 rounded-3xl overflow-hidden"
  >
    <LazyCellAttachmentImage
      v-if="bannerImageUrl"
      :srcs="getPossibleAttachmentSrc(parseProp(bannerImageUrl))"
      class="nc-form-banner-image object-cover w-full"
    />
    <!-- Todo: aspect ratio and cover image uploader and image cropper to crop image in fixed aspect ratio  -->
    <div v-if="!bannerImageUrl" class="h-full flex items-stretch justify-between">
      <div class="flex">
        <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
      </div>

      <div class="w-[91px] flex justify-center">
        <img class="max-h-full self-center" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
      </div>
      <div class="flex justify-end">
        <img src="~assets/img/form-banner-right.png" alt="form-banner-left'" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nc-form-banner-wrapper {
  aspect-ratio: 468/60;
  @media (max-width: 768px) {
    aspect-ratio: 4/1;
  }
}
</style>