ADD: Components

Teaser, Card

app/components/Teaser.vue

@@ -0,0 +1,42 @@
+<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-default">
+      <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>