soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match gallery preview filters and tiles to gallery
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 16:07:29 +01:00
parent 289ef70e53
commit 33e46b448d
1 changed files with 53 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
resources/js/guest/components/GalleryPreview.tsx
View File

@@ -111,32 +111,32 @@ export default function GalleryPreview({ token }: Props) {
</Link> </Link>
</div> </div>
<div className="flex gap-2 overflow-x-auto pb-1 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none]"> <div className="flex overflow-x-auto pb-1 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none]">
{filters.map((filter) => { <div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
const isActive = mode === filter.value; {filters.map((filter, index) => {
const isActive = mode === filter.value;
return ( return (
<button <div key={filter.value} className="flex items-center">
key={filter.value} <button
type="button" type="button"
onClick={() => setMode(filter.value)} onClick={() => setMode(filter.value)}
style={{ className={cn(
borderRadius: radius, 'inline-flex items-center rounded-full px-3 py-1.5 transition',
border: isActive ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`, isActive
background: isActive ? branding.primaryColor : undefined, ? 'bg-pink-500 text-white shadow'
boxShadow: isActive ? `0 8px 18px ${branding.primaryColor}33` : 'none', : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
}} )}
className={cn( >
'px-4 py-1 transition', <span className="whitespace-nowrap">{filter.label}</span>
isActive </button>
? 'text-white' {index < filters.length - 1 && (
: 'bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70 dark:text-slate-100', <span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
)} )}
> </div>
{filter.label} );
</button> })}
); </div>
})}
</div> </div>
{loading && <p className="text-sm text-muted-foreground">Lädt…</p>} {loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
@@ -147,43 +147,35 @@ export default function GalleryPreview({ token }: Props) {
</div> </div>
)} )}
<div className="grid gap-2 grid-cols-2 md:grid-cols-3"> <div className="grid gap-3 grid-cols-2 md:grid-cols-3">
{items.map((p: PreviewPhoto) => ( {items.map((p: PreviewPhoto) => (
<Link <Link
key={p.id} key={p.id}
to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`} to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
className="group relative block overflow-hidden bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70" className="group flex flex-col overflow-hidden border border-border/60 bg-white shadow-sm ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
style={{ style={{ borderRadius: radius }}
borderRadius: radius, >
border: `1px solid ${branding.primaryColor}22`, <div className="relative">
boxShadow: `0 12px 26px ${branding.primaryColor}22`, <img
}} src={p.thumbnail_path || p.file_path}
> alt={p.title || 'Foto'}
<img className="aspect-[3/4] w-full object-cover transition duration-300 group-hover:scale-105"
src={p.thumbnail_path || p.file_path} loading="lazy"
alt={p.title || 'Foto'} />
className="h-40 w-full object-cover transition duration-300 group-hover:scale-105" <div className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-black/50 via-black/0 to-transparent" aria-hidden />
loading="lazy"
/>
<div
className="absolute inset-0"
style={{
background: `linear-gradient(180deg, transparent 50%, ${branding.primaryColor}33 100%)`,
}}
aria-hidden
/>
<div className="absolute bottom-0 left-0 right-0 space-y-1 p-3">
<p className="text-sm font-semibold leading-tight line-clamp-2" style={headingFont ? { fontFamily: headingFont } : undefined}>
{p.title || getPhotoTitle(p)}
</p>
<div className="flex items-center gap-1 text-xs text-foreground/80">
<Heart className="h-4 w-4" style={{ color: branding.primaryColor }} aria-hidden />
{p.likes_count ?? 0}
</div> </div>
</div> <div className="space-y-2 px-3 pb-3 pt-3">
</Link> <p className="text-sm font-semibold leading-tight line-clamp-2 text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
))} {p.title || getPhotoTitle(p)}
</div> </p>
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Heart className="h-3.5 w-3.5 text-pink-500" aria-hidden />
{p.likes_count ?? 0}
</div>
</div>
</Link>
))}
</div>
<p className="text-center text-sm text-muted-foreground"> <p className="text-center text-sm text-muted-foreground">
Lust auf mehr?{' '} Lust auf mehr?{' '}