slidev-theme-narduin/layouts/title-image.vue

<script setup lang="ts">
import { imageSrc } from '../utils/imageHelper'

const props = defineProps({
  image: {
    type: String,
    required: true
  },
  ratio: {
    type: String,
    default: '3fr 2fr'
  },
  textAlign: {
    type: String,
    default: 'start'
  },
  imageAlign: {
    type: String,
    default: 'center'
  }
})

const image = imageSrc(props.image)
</script>

<template>
  <div class="slidev-layout h-full title">
    <div class="grid h-full gap-4">
      <div>
        <slot />
      </div>
      <div class="image"></div>
    </div>
  </div>
</template>

<style scoped>
.grid {
  grid-template-columns: v-bind(ratio);
  align-items: v-bind(textAlign);
}
.image {
  block-size: 100%;
  background-image: v-bind(image);
  background-size: cover;
  background-position: v-bind(imageAlign);
}
</style>