83 lines
4.2 KiB
JavaScript
83 lines
4.2 KiB
JavaScript
import { mergeProps, ref, unref, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrInterpolate } from 'vue/server-renderer';
|
|
import { X } from 'lucide-vue-next';
|
|
import { u as useHead } from './composables-CK-Mp9jS.mjs';
|
|
import './server.mjs';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/utils';
|
|
import 'pinia';
|
|
import 'vue-router';
|
|
|
|
const _sfc_main$1 = {
|
|
__name: "Gallery",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const images = ref([]);
|
|
const lightboxImage = ref(null);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
if (images.value.length > 0) {
|
|
_push(`<section${ssrRenderAttrs(mergeProps({
|
|
id: "gallery",
|
|
class: "py-16 sm:py-20 bg-gradient-to-b from-white to-gray-50"
|
|
}, _attrs))}><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="text-center mb-16"><h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4"> Galerie </h2><div class="w-24 h-1 bg-primary-600 mx-auto mb-6"></div><p class="text-xl text-gray-600 max-w-3xl mx-auto"> Eindrücke von unserem Verein </p></div><div class="grid sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2"><!--[-->`);
|
|
ssrRenderList(images.value, (image) => {
|
|
_push(`<div class="group relative w-20 h-20 rounded-md overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"><img${ssrRenderAttr("src", `/galerie/${image.filename}`)}${ssrRenderAttr("alt", image.title)} class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"><div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"><p class="text-white font-semibold text-xs p-1 truncate">${ssrInterpolate(image.title)}</p></div></div>`);
|
|
});
|
|
_push(`<!--]--></div>`);
|
|
if (lightboxImage.value) {
|
|
_push(`<div class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"><div class="relative w-full h-full flex items-center justify-center"><button class="absolute top-4 right-4 z-10 w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition-colors">`);
|
|
_push(ssrRenderComponent(unref(X), { size: 24 }, null, _parent));
|
|
_push(`</button><img${ssrRenderAttr("src", `/galerie/${lightboxImage.value.filename}`)}${ssrRenderAttr("alt", lightboxImage.value.title)} class="max-w-[80vw] max-h-[80vh] object-contain rounded-lg"><div class="absolute bottom-4 left-4 right-4 text-center"><p class="text-white font-semibold text-lg bg-black/50 rounded-lg px-4 py-2">${ssrInterpolate(lightboxImage.value.title)}</p></div></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div></section>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
};
|
|
}
|
|
};
|
|
const _sfc_setup$1 = _sfc_main$1.setup;
|
|
_sfc_main$1.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/Gallery.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const Gallery = Object.assign(_sfc_main$1, { __name: "Gallery" });
|
|
const _sfc_main = {
|
|
__name: "galerie",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
useHead({
|
|
title: "Galerie - Harheimer TC"
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "min-h-screen" }, _attrs))}>`);
|
|
_push(ssrRenderComponent(Gallery, null, null, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
};
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/galerie.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=galerie-CoMmWwEg.mjs.map
|