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 @@
+
+
+
+.gallery-embed(
+ @click='$emit("click", { event: $event, entry })'
+)
+ .image-wrapper
+ img(
+ :src='entry.thumbnailUrl || entry.url'
+ :alt='entry.description || entry.title'
+ )
+ p {{ entry.title }}
+
+
+
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 }}