65 lines
2.2 KiB
Vue
65 lines
2.2 KiB
Vue
<template>
|
|
<div class="space-y-4">
|
|
<p
|
|
v-if="!images.length"
|
|
class="rounded-3xl border border-dashed border-white/20 bg-white/5 px-4 py-10 text-center text-sm text-slate-300"
|
|
>
|
|
{{ props.translations.empty_gallery || 'Noch keine Bilder vorhanden.' }}
|
|
</p>
|
|
<div
|
|
v-else
|
|
class="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 xl:grid-cols-4 2xl:grid-cols-5"
|
|
>
|
|
<button
|
|
v-for="image in images"
|
|
:key="image.id ?? image.name"
|
|
type="button"
|
|
class="group relative aspect-[3/4] overflow-hidden rounded-[1.75rem] border border-white/10 bg-slate-900/30 shadow-2xl ring-1 ring-white/5 transition-all hover:border-emerald-300 focus:outline-none focus-visible:ring-4 focus-visible:ring-emerald-400"
|
|
@click="$emit('imageTapped', image, $event)"
|
|
:aria-label="fallbackLabel(image)"
|
|
>
|
|
<img
|
|
:src="image.path"
|
|
:alt="fallbackLabel(image)"
|
|
loading="lazy"
|
|
class="h-full w-full object-cover transition duration-700 group-hover:scale-105"
|
|
/>
|
|
<span
|
|
v-if="image.is_new"
|
|
class="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full bg-emerald-300/90 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-900 shadow-lg"
|
|
>
|
|
<span class="h-1.5 w-1.5 rounded-full bg-emerald-800"></span>
|
|
{{ __('new') }}
|
|
</span>
|
|
<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent p-4 text-left">
|
|
<p class="text-base font-semibold text-white drop-shadow">{{ fallbackLabel(image) }}</p>
|
|
<p class="text-xs uppercase tracking-[0.3em] text-white/70">Tap to open</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
translations: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['imageTapped']);
|
|
|
|
const __ = (key) => {
|
|
return props.translations[key] || key;
|
|
};
|
|
|
|
const fallbackLabel = (image) => image?.name || props.translations.image || 'Bild';
|
|
</script>
|