gallery tile

src/components/galleries/gallery-tile.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue'
+
+import type { GalleryEntry } from 'src/types/galleries/galleryList'
+
+defineProps<{
+  entry: GalleryEntry,
+}>()
+
+defineEmits<{
+  (e: 'click', value: { event: Event, entry: GalleryEntry }): void
+}>()
+</script>
+
+<template lang="pug">
+.gallery-embed(
+  @click='$emit("click", { event: $event, entry })'
+)
+  .image-wrapper
+    img(
+      :src='entry.thumbnailUrl || entry.url'
+      :alt='entry.description || entry.title'
+    )
+  p {{ entry.title }}
+</template>
+
+<style scoped lang="sass">
+
+</style>

src/views/gallery-list.vue

@@ -8,6 +8,8 @@ import { fetchAndParseYaml } from 'src/utilities/fetch'
 import { getCurrentRoute } from 'src/utilities/vuetils'
 import { useRouteStore } from 'src/routes'
 
+import GalleryTile from 'src/components/galleries/gallery-tile.vue'
+
 const props = defineProps<{
   variants: string[]
 }>()
@@ -35,8 +37,10 @@ const onDisplayEntries = () => {
   entries.value = currentEntries
 }
 
-const onTileClicked = (e: Event, entry: GalleryEntry) => {
-  e.preventDefault()
+const onTileClicked = (clickEvent: { event: Event, entry: GalleryEntry }) => {
+  const { event, entry } = clickEvent
+
+  event.preventDefault()
   if (!!entry.variants) {
     const newPath = !!variants.value
       ? `${(variants.value || []).join(',')},${entry.id}`
@@ -77,12 +81,11 @@ onMounted(async () => {
       v-if='variants?.length > 0'
       @click='onNavigateBack($event)'
     ) Back
-    .tile(
+    GalleryTile(
       v-for='(entry) in entries'
+      :entry='entry'
+      @click='onTileClicked($event)'
     )
-      p(
-        @click='onTileClicked($event, entry)'
-      ) {{ entry.title }}
 </template>
 
 <style scoped lang="sass">