42 lines
No EOL
897 B
Vue
42 lines
No EOL
897 B
Vue
<template>
|
|
<article
|
|
class="Teaser z-2 card flex-col gap-sm"
|
|
:class="[image.position ?? 'left']"
|
|
>
|
|
<div class="image-container">
|
|
<img
|
|
loading="lazy"
|
|
width="550"
|
|
height="350"
|
|
:srcset="imageSet.join(', ')"
|
|
:src="initialImage"
|
|
aria-hidden="true"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="text-container flex-col gap-sm">
|
|
<h3>{{title}}</h3>
|
|
<main class="flex-col gap-sm">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getImageSet, getInitialImage } from '../utils/image'
|
|
|
|
type Props = {
|
|
title : string
|
|
image : {
|
|
path : string
|
|
name : string
|
|
position ?: 'left' | 'right'
|
|
}
|
|
}
|
|
|
|
const { image } = defineProps<Props>()
|
|
|
|
const imageSet = getImageSet(image.path, image.name)
|
|
const initialImage = getInitialImage(image.path, image.name)
|
|
</script> |