9bde8f3f32
- Added fonts:sync-google command (uses GOOGLE_FONTS_API_KEY, generates /public/fonts/google files, manifest, CSS, cache flush) and
exposed manifest via new GET /api/v1/tenant/fonts endpoint with fallbacks for existing local fonts.
- Imported generated fonts CSS, added API client + font loader hook, and wired branding page font fields to searchable selects (with
custom override) that auto-load selected fonts.
- Invites layout editor now offers font selection per element with runtime font loading for previews/export alignment.
- New tests cover font sync command and font manifest API.
Tests run: php artisan test --filter=Fonts --testsuite=Feature.
Note: repository already has other modified files (e.g., EventPublicController, SettingsStoreRequest, guest components, etc.); left
untouched. Run php artisan fonts:sync-google after setting the API key to populate /public/fonts/google.
519 lines
23 KiB
TypeScript
519 lines
23 KiB
TypeScript
// @ts-nocheck
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Page } from './_util';
|
|
import { useParams, useSearchParams } from 'react-router-dom';
|
|
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
|
import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
|
|
import { Heart, Image as ImageIcon, Share2, MessageSquare, Copy } from 'lucide-react';
|
|
import { likePhoto } from '../services/photosApi';
|
|
import PhotoLightbox from './PhotoLightbox';
|
|
import { fetchEvent, type EventData } from '../services/eventApi';
|
|
import { useTranslation } from '../i18n/useTranslation';
|
|
import { sharePhotoLink } from '../lib/sharePhoto';
|
|
import { useToast } from '../components/ToastHost';
|
|
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
|
import { createPhotoShareLink } from '../services/photosApi';
|
|
import { cn } from '@/lib/utils';
|
|
import { useEventBranding } from '../context/EventBrandingContext';
|
|
|
|
const allGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
|
type GalleryPhoto = {
|
|
id: number;
|
|
likes_count?: number | null;
|
|
created_at?: string | null;
|
|
ingest_source?: string | null;
|
|
session_id?: string | null;
|
|
task_id?: number | null;
|
|
task_title?: string | null;
|
|
emotion_id?: number | null;
|
|
emotion_name?: string | null;
|
|
thumbnail_path?: string | null;
|
|
file_path?: string | null;
|
|
title?: string | null;
|
|
uploader_name?: string | null;
|
|
};
|
|
|
|
const normalizeImageUrl = (src?: string | null) => {
|
|
if (!src) {
|
|
return '';
|
|
}
|
|
|
|
if (/^https?:/i.test(src)) {
|
|
return src;
|
|
}
|
|
|
|
let cleanPath = src.replace(/^\/+/g, '').replace(/\/+/g, '/');
|
|
if (!cleanPath.startsWith('storage/')) {
|
|
cleanPath = `storage/${cleanPath}`;
|
|
}
|
|
|
|
return `/${cleanPath}`.replace(/\/+/g, '/');
|
|
};
|
|
|
|
export default function GalleryPage() {
|
|
const { token } = useParams<{ token?: string }>();
|
|
const { t, locale } = useTranslation();
|
|
const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(token ?? '', locale);
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const photoIdParam = searchParams.get('photoId');
|
|
const modeParam = searchParams.get('mode');
|
|
const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
|
|
const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
|
|
const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
|
|
|
|
const [event, setEvent] = useState<EventData | null>(null);
|
|
const [eventLoading, setEventLoading] = useState(true);
|
|
const toast = useToast();
|
|
const [shareTargetId, setShareTargetId] = React.useState<number | null>(null);
|
|
const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
|
|
const [shareSheet, setShareSheet] = React.useState<{ photo: GalleryPhoto | null; url: string | null; loading: boolean }>({
|
|
photo: null,
|
|
url: null,
|
|
loading: false,
|
|
});
|
|
|
|
const typedPhotos = photos as GalleryPhoto[];
|
|
const showPhotoboothFilter = React.useMemo(
|
|
() => Boolean(event?.photobooth_enabled) || typedPhotos.some((p) => p.ingest_source === 'photobooth'),
|
|
[event?.photobooth_enabled, typedPhotos],
|
|
);
|
|
const allowedGalleryFilters = React.useMemo<GalleryFilter[]>(
|
|
() => (showPhotoboothFilter ? allGalleryFilters : ['latest', 'popular', 'mine']),
|
|
[showPhotoboothFilter],
|
|
);
|
|
const parseGalleryFilter = React.useCallback(
|
|
(value: string | null): GalleryFilter =>
|
|
allowedGalleryFilters.includes(value as GalleryFilter) ? (value as GalleryFilter) : 'latest',
|
|
[allowedGalleryFilters],
|
|
);
|
|
|
|
useEffect(() => {
|
|
setFilterState(parseGalleryFilter(modeParam));
|
|
}, [modeParam, parseGalleryFilter]);
|
|
|
|
const setFilter = React.useCallback((next: GalleryFilter) => {
|
|
setFilterState(next);
|
|
const params = new URLSearchParams(searchParams);
|
|
params.set('mode', next);
|
|
setSearchParams(params, { replace: true });
|
|
}, [searchParams, setSearchParams]);
|
|
|
|
useEffect(() => {
|
|
if (filter === 'photobooth' && !showPhotoboothFilter) {
|
|
setFilter('latest');
|
|
}
|
|
}, [filter, showPhotoboothFilter, setFilter]);
|
|
|
|
// Auto-open lightbox if photoId in query params
|
|
useEffect(() => {
|
|
if (photoIdParam && photos.length > 0 && currentPhotoIndex === null && !hasOpenedPhoto) {
|
|
const index = typedPhotos.findIndex((photo) => photo.id === parseInt(photoIdParam, 10));
|
|
if (index !== -1) {
|
|
setCurrentPhotoIndex(index);
|
|
setHasOpenedPhoto(true);
|
|
}
|
|
}
|
|
}, [typedPhotos, photos.length, photoIdParam, currentPhotoIndex, hasOpenedPhoto]);
|
|
|
|
// Load event and package info
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
|
|
const loadEventData = async () => {
|
|
try {
|
|
setEventLoading(true);
|
|
const eventData = await fetchEvent(token);
|
|
setEvent(eventData);
|
|
} catch (err) {
|
|
console.error('Failed to load event data', err);
|
|
} finally {
|
|
setEventLoading(false);
|
|
}
|
|
};
|
|
|
|
loadEventData();
|
|
}, [token]);
|
|
|
|
const myPhotoIds = React.useMemo(() => {
|
|
try {
|
|
const raw = localStorage.getItem('my-photo-ids');
|
|
return new Set<number>(raw ? JSON.parse(raw) : []);
|
|
} catch { return new Set<number>(); }
|
|
}, []);
|
|
|
|
const list = React.useMemo(() => {
|
|
let arr = typedPhotos.slice();
|
|
if (filter === 'popular') {
|
|
arr.sort((a, b) => (b.likes_count ?? 0) - (a.likes_count ?? 0));
|
|
} else if (filter === 'mine') {
|
|
arr = arr.filter((p) => myPhotoIds.has(p.id));
|
|
} else if (filter === 'photobooth') {
|
|
arr = arr.filter((p) => p.ingest_source === 'photobooth');
|
|
arr.sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
|
|
} else {
|
|
arr.sort((a, b) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
|
|
}
|
|
return arr;
|
|
}, [typedPhotos, filter, myPhotoIds]);
|
|
const [liked, setLiked] = React.useState<Set<number>>(new Set());
|
|
const [counts, setCounts] = React.useState<Record<number, number>>({});
|
|
|
|
async function onLike(id: number) {
|
|
if (liked.has(id)) return;
|
|
setLiked(new Set(liked).add(id));
|
|
try {
|
|
const c = await likePhoto(id);
|
|
setCounts((m) => ({ ...m, [id]: c }));
|
|
// keep a simple record of liked items
|
|
try {
|
|
const raw = localStorage.getItem('liked-photo-ids');
|
|
const arr: number[] = raw ? JSON.parse(raw) : [];
|
|
if (!arr.includes(id)) localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, id]));
|
|
} catch (error) {
|
|
console.warn('Failed to persist liked-photo-ids', error);
|
|
}
|
|
} catch (error) {
|
|
console.warn('Like failed', error);
|
|
const s = new Set(liked); s.delete(id); setLiked(s);
|
|
}
|
|
}
|
|
|
|
const buildShareText = (fallback?: string) => t('share.shareText', { event: event?.name ?? fallback ?? 'Fotospiel' });
|
|
|
|
async function onShare(photo: GalleryPhoto) {
|
|
if (!token) return;
|
|
setShareSheet({ photo, url: null, loading: true });
|
|
setShareTargetId(photo.id);
|
|
try {
|
|
const url = await ensureShareUrl(photo);
|
|
setShareSheet({ photo, url, loading: false });
|
|
} catch (error) {
|
|
console.error('share failed', error);
|
|
toast.push({ text: t('share.error', 'Teilen fehlgeschlagen'), type: 'error' });
|
|
setShareSheet({ photo: null, url: null, loading: false });
|
|
} finally {
|
|
setShareTargetId(null);
|
|
}
|
|
}
|
|
|
|
async function ensureShareUrl(photo: GalleryPhoto): Promise<string> {
|
|
if (!token) throw new Error('missing token');
|
|
const payload = await createPhotoShareLink(token, photo.id);
|
|
return payload.url;
|
|
}
|
|
|
|
function shareNative(url?: string | null) {
|
|
if (!shareSheet.photo || !url) return;
|
|
const localizedTask = localizeTaskLabel(shareSheet.photo.task_title ?? null, locale);
|
|
const data: ShareData = {
|
|
title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
|
|
text: buildShareText(),
|
|
url,
|
|
};
|
|
if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
|
|
navigator.share(data).catch(() => {
|
|
// user cancelled; no toast
|
|
});
|
|
setShareSheet({ photo: null, url: null, loading: false });
|
|
return;
|
|
}
|
|
void copyLink(url);
|
|
}
|
|
|
|
function shareWhatsApp(url?: string) {
|
|
if (!url) return;
|
|
const text = `${buildShareText()} ${url}`;
|
|
const waUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
|
|
window.open(waUrl, '_blank', 'noopener');
|
|
setShareSheet({ photo: null, url: null, loading: false });
|
|
}
|
|
|
|
function shareMessages(url?: string) {
|
|
if (!url) return;
|
|
const text = `${buildShareText()} ${url}`;
|
|
const smsUrl = `sms:?&body=${encodeURIComponent(text)}`;
|
|
window.open(smsUrl, '_blank', 'noopener');
|
|
setShareSheet({ photo: null, url: null, loading: false });
|
|
}
|
|
|
|
async function copyLink(url?: string | null) {
|
|
if (!url) return;
|
|
try {
|
|
await navigator.clipboard?.writeText(url);
|
|
toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
|
|
} catch {
|
|
toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
|
|
} finally {
|
|
setShareSheet({ photo: null, url: null, loading: false });
|
|
}
|
|
}
|
|
|
|
function closeShareSheet() {
|
|
setShareSheet({ photo: null, url: null, loading: false });
|
|
}
|
|
|
|
const WhatsAppIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden focusable="false" {...props}>
|
|
<path
|
|
fill="currentColor"
|
|
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
if (!token) {
|
|
return (
|
|
<Page title={t('galleryPage.title', 'Galerie')}>
|
|
<p>{t('galleryPage.eventNotFound', 'Event nicht gefunden.')}</p>
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
if (eventLoading) {
|
|
return (
|
|
<Page title={t('galleryPage.title', 'Galerie')}>
|
|
<p>{t('galleryPage.loadingEvent', 'Lade Event-Info...')}</p>
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
const newPhotosBadgeText = t('galleryPage.badge.newPhotos', {
|
|
count: numberFormatter.format(newCount),
|
|
}, `${newCount} neue Fotos`);
|
|
const badgeEmphasisClass = newCount > 0
|
|
? 'border border-pink-200 bg-pink-500/15 text-pink-600'
|
|
: 'border border-transparent bg-muted text-muted-foreground';
|
|
|
|
return (
|
|
<Page title="">
|
|
<div className="space-y-2" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
|
|
<ImageIcon className="h-5 w-5" aria-hidden />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
|
|
<p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
|
|
</div>
|
|
|
|
{newCount > 0 ? (
|
|
<button
|
|
type="button"
|
|
onClick={acknowledgeNew}
|
|
className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
|
|
style={{ borderRadius: radius }}
|
|
>
|
|
{newPhotosBadgeText}
|
|
</button>
|
|
) : (
|
|
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
|
|
{newPhotosBadgeText}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<FiltersBar
|
|
value={filter}
|
|
onChange={setFilter}
|
|
className="mt-2"
|
|
showPhotobooth={showPhotoboothFilter}
|
|
styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
|
|
/>
|
|
{loading && <p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>{t('galleryPage.loading', 'Lade…')}</p>}
|
|
<div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
|
|
{list.map((p: GalleryPhoto) => {
|
|
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
|
|
const createdLabel = p.created_at
|
|
? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
: t('galleryPage.photo.justNow', 'Gerade eben');
|
|
const likeCount = counts[p.id] ?? (p.likes_count || 0);
|
|
const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
|
|
const altSuffix = localizedTaskTitle
|
|
? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
|
|
: '';
|
|
const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
|
|
|
|
const openPhoto = () => {
|
|
const index = list.findIndex((photo) => photo.id === p.id);
|
|
setCurrentPhotoIndex(index >= 0 ? index : null);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={p.id}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={openPhoto}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
openPhoto();
|
|
}
|
|
}}
|
|
className="group relative overflow-hidden border border-white/20 bg-gray-950 text-white shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400"
|
|
style={{ borderRadius: radius }}
|
|
>
|
|
<img
|
|
src={imageUrl}
|
|
alt={altText}
|
|
className="h-64 w-full object-cover transition duration-500 group-hover:scale-105"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
|
}}
|
|
loading="lazy"
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" aria-hidden />
|
|
<div className="absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
|
{localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2 text-white" style={headingFont ? { fontFamily: headingFont } : undefined}>{localizedTaskTitle}</p>}
|
|
<div className="flex items-center justify-between text-xs text-white/90" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
|
<span className="truncate">{createdLabel}</span>
|
|
<span className="ml-3 truncate text-right">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
|
|
</div>
|
|
</div>
|
|
<div className="absolute left-3 top-3 z-10 flex flex-col items-start gap-2">
|
|
{localizedTaskTitle && (
|
|
<span className="rounded-full bg-white/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-white shadow" style={{ borderRadius: radius }}>
|
|
{localizedTaskTitle}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="absolute right-3 top-3 z-10 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onShare(p);
|
|
}}
|
|
className={cn(
|
|
'flex h-9 w-9 items-center justify-center border text-white transition backdrop-blur',
|
|
shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
|
|
)}
|
|
aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
|
|
disabled={shareTargetId === p.id}
|
|
style={{
|
|
borderRadius: radius,
|
|
background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
|
|
border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
|
|
color: buttonStyle === 'outline' ? linkColor : undefined,
|
|
}}
|
|
>
|
|
<Share2 className="h-4 w-4" aria-hidden />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onLike(p.id);
|
|
}}
|
|
className={cn(
|
|
'flex items-center gap-1 px-3 py-1 text-sm font-medium transition backdrop-blur',
|
|
liked.has(p.id) ? 'text-pink-300' : 'text-white'
|
|
)}
|
|
aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
|
|
style={{
|
|
borderRadius: radius,
|
|
background: buttonStyle === 'outline' ? 'transparent' : '#00000066',
|
|
border: buttonStyle === 'outline' ? `1px solid ${linkColor}` : '1px solid rgba(255,255,255,0.4)',
|
|
color: buttonStyle === 'outline' ? linkColor : undefined,
|
|
}}
|
|
>
|
|
<Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
|
|
{likeCount}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{currentPhotoIndex !== null && list.length > 0 && (
|
|
<PhotoLightbox
|
|
photos={list}
|
|
currentIndex={currentPhotoIndex}
|
|
onClose={() => setCurrentPhotoIndex(null)}
|
|
onIndexChange={(index: number) => setCurrentPhotoIndex(index)}
|
|
token={token}
|
|
/>
|
|
)}
|
|
|
|
{shareSheet.photo && (
|
|
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
|
|
<div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">
|
|
{t('share.title', 'Geteiltes Foto')}
|
|
</p>
|
|
<p className="text-sm font-semibold text-foreground">#{shareSheet.photo.id}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
|
|
onClick={closeShareSheet}
|
|
>
|
|
{t('lightbox.close', 'Schließen')}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
|
onClick={() => shareNative(shareSheet.url)}
|
|
disabled={shareSheet.loading}
|
|
>
|
|
<Share2 className="h-4 w-4" />
|
|
<div>
|
|
<div>{t('share.button', 'Teilen')}</div>
|
|
<div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
|
|
onClick={() => shareWhatsApp(shareSheet.url)}
|
|
disabled={shareSheet.loading}
|
|
>
|
|
<WhatsAppIcon className="h-5 w-5" />
|
|
<div>
|
|
<div>{t('share.whatsapp', 'WhatsApp')}</div>
|
|
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
|
|
onClick={() => shareMessages(shareSheet.url)}
|
|
disabled={shareSheet.loading}
|
|
>
|
|
<MessageSquare className="h-5 w-5" />
|
|
<div>
|
|
<div>{t('share.imessage', 'Nachrichten')}</div>
|
|
<div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
|
|
</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
|
|
onClick={() => copyLink(shareSheet.url)}
|
|
disabled={shareSheet.loading}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
<div>
|
|
<div>{t('share.copyLink', 'Link kopieren')}</div>
|
|
<div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Page>
|
|
);
|
|
}
|
|
const { branding } = useEventBranding();
|
|
const radius = branding.buttons?.radius ?? 12;
|
|
const buttonStyle = branding.buttons?.style ?? 'filled';
|
|
const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
|
|
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
|
|
const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
|