From 0badceef74fea40b183ae820c177c4df8cdc267d Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Sun, 17 Mar 2024 23:59:52 -0400
Subject: [PATCH] gallery tile

---
 src/components/galleries/gallery-tile.vue | 29 +++++++++++++++++++++++
 src/views/gallery-list.vue                | 15 +++++++-----
 2 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/components/galleries/gallery-tile.vue

diff --git a/src/components/galleries/gallery-tile.vue b/src/components/galleries/gallery-tile.vue
new file mode 100644
index 0000000..464ca6b
--- /dev/null
+++ b/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>
diff --git a/src/views/gallery-list.vue b/src/views/gallery-list.vue
index 07dab93..66fd528 100644
--- a/src/views/gallery-list.vue
+++ b/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">