audi/app/components/block/mainVisual.vue

<template>
  <div class="main--visual">
    <!-- Video -->
    <div v-if="type === 'video'" class="video--wrap">
      <video :src="src" autoplay muted loop playsinline controls></video>
    </div>

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

    <div class="text--wrap">
      <h2>{{ title }}</h2>
      <p>{{ description }}</p>
      <div v-if="button1Title || button2Title" class="button--wrap">
        <NuxtLink
          v-if="button1Title"
          :to="button1Link"
          :class="['btn', `btn--${button1Color}`]"
        >
          {{ button1Title }}
        </NuxtLink>
        <NuxtLink
          v-if="button2Title"
          :to="button2Link"
          :class="['btn', `btn--${button2Color}`]"
        >
          {{ button2Title }}
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

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