audi/app/components/block/mainSection.vue

<template>
  <section :class="['img--desc--section', { reverse: reverse }]">
    <!-- Video -->
    <div v-if="type === 'video'" class="video--wrap">
      <video :src="src" autoplay muted loop playsinline></video>
    </div>

    <!-- Image -->
    <div v-else-if="type === 'image'" class="img--wrap">
      <img :src="src" :alt="title" />
    </div>

    <div class="desc--wrap">
      <h3>{{ title }}</h3>
      <p>{{ desc }}</p>
      <div v-if="button1Title || button2Title" class="btn--wrap mt--24">
        <NuxtLink
          v-if="button1Title"
          :target="button1Target"
          :to="button1Link"
          :class="['btn', `btn--${button1Color}`]"
        >
          {{ button1Title }}
        </NuxtLink>
        <NuxtLink
          v-if="button2Title"
          :target="button2Target"
          :to="button2Link"
          :class="['btn', `btn--${button2Color}`]"
        >
          {{ button2Title }}
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'image',
    validator: (value) => ['video', 'image'].includes(value)
  },
  src: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  desc: {
    type: String,
    required: true
  },
  reverse: {
    type: Boolean,
    default: false
  },
  button1Title: {
    type: String,
    default: ''
  },
  button1Link: {
    type: String,
    default: '#'
  },
  button1Target: {
    type: String,
    default: '_self',
    validator: (value) => ['_self', '_blank'].includes(value)
  },
  button1Color: {
    type: String,
    default: 'gray',
    validator: (value) => ['black', 'gray'].includes(value)
  },
  button2Title: {
    type: String,
    default: ''
  },
  button2Link: {
    type: String,
    default: '#'
  },
  button2Target: {
    type: String,
    default: '_self',
    validator: (value) => ['_self', '_blank'].includes(value)
  },
  button2Color: {
    type: String,
    default: 'gray',
    validator: (value) => ['black', 'gray'].includes(value)
  }
});
</script>