HeroVariationOne.ts.vue

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';
import { VCard, VImg } from 'vuetify/lib/components';

import type { HeroBanner, OverlayContent } from '../Hero.d';

import Overlay from '../components/HeroOverlay.ts.vue';

@Component({
  components: {
    VCard,
    VImg,
    Overlay,
  },
})
export default class VariationOne extends Vue {
  @Prop({
    required: true,
  })
  readonly content: HeroBanner;

  get overlayContent(): OverlayContent {
    const {
      heroText,
      heroSubtitle,
      calloutLink,
    } = this.content;

    return {
      heroText,
      heroSubtitle,
      calloutLink,
    };
  }
}
</script>

<template>
  <VCard
    class="Hero--variation1"
    :elevation="2"
  >
    <VImg
      v-if="content.calloutImage"
      class="Hero--variation1__background"
      :alt="content.calloutImage.imageAlt"
      :lazy-src="content.calloutImage.imageLink"
      :src="content.calloutImage.imageLink"
      gradient="rgba(51, 51, 51, .70), rgba(51, 51, 51, .70)"
      height="400px"
      width="100%"
    />
    <Overlay
      :background="true"
      :overlay-content="overlayContent"
    />
  </VCard>
</template>

<style lang="scss">
  .Hero--variation1 {
    background-color: $color-gray-20;
    position: relative;
  }
</style>