Skip to content

feat: implement redesigned events page with event cards and gallery s… #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
peterlipt wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: implement redesigned events page with event cards and gallery s… #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions src/app/(app)/[lang]/kozelet/rendezvenyek/components/EventCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import Image from "next/image";
import { Media } from "@/payload-types";
import { Locale } from "@/i18n-config";
import type { SerializedEditorState } from "@payloadcms/richtext-lexical/lexical";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { getSocialIcon, getSocialName, getSocialPriority } from "@/lib/social-utils";
import { EventGallery } from "./EventGallery";

interface EventCardLabels {
leiras: string;
gallery: string;
links: string;
prev_image: string;
next_image: string;
}

interface EventLink {
label: string;
url: string;
}

interface EventCardProps {
title: string;
coverImage: Media | null;
description: SerializedEditorState | null | undefined;
galleryImages: Media[];
links: EventLink[];
lang: Locale;
labels: EventCardLabels;
}

function isValidUrl(url: string | null | undefined): boolean {
if (!url) return false;
try {
const parsed = new URL(url);
return parsed.protocol === "http:" || parsed.protocol === "https:";
} catch {
return false;
}
}

export function EventCard({
title,
coverImage,
description,
galleryImages,
links,
lang,
labels,
}: EventCardProps) {
const validLinks = links
.filter((link) => isValidUrl(link.url))
.sort((a, b) => getSocialPriority(a.label) - getSocialPriority(b.label));

return (
<div className="w-full">
{/* Title bar */}
<div className="bg-[#fffefc] border-t border-x border-[#e9e2d6] px-6 md:px-8 py-4 rounded-tl-lg rounded-tr-lg flex items-center min-h-[77px]">
<h2 className="font-playfair font-bold text-[22px] leading-[1.3] text-[#1a1a1a]">{title}</h2>
</div>

{/* Cover image */}
<div className="relative w-full h-[200px] md:h-[312px] border-x border-[#e9e2d6] bg-[#f9f4f0]">
{coverImage?.url ? (
<Image
src={coverImage.url}
alt={coverImage.alt || title}
fill
className="object-cover"
sizes="(max-width: 768px) 100vw, 1200px"
/>
) : null}
</div>

{/* Body */}
<div className="bg-[#fffefc] border border-[#e9e2d6] px-6 md:px-8 py-4 rounded-bl-lg rounded-br-lg flex flex-col gap-8">
{/* LEÍRÁS */}
{description ? (
<div className="flex flex-col gap-1">
<p className="font-open-sans font-bold text-sm text-[#9a9a9a] leading-[1.6]">{labels.leiras}</p>
<div className="richtext font-open-sans text-sm text-[#1a1a1a] leading-[1.6]">
<RichText data={description} />
</div>
</div>
) : null}

{/* GALÉRIA */}
{galleryImages.length > 0 ? (
<EventGallery
images={galleryImages}
label={labels.gallery}
prevLabel={labels.prev_image}
nextLabel={labels.next_image}
/>
) : null}

{/* LINKEK */}
{validLinks.length > 0 ? (
<div className="flex flex-col gap-2">
<p className="font-open-sans font-bold text-sm text-[#9a9a9a] leading-[1.6]">{labels.links}</p>
<div className="flex flex-wrap gap-2">
{validLinks.map((link, idx) => (
<a
key={`${link.url}-${idx}`}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 bg-[#f9f4f0] border border-[#e9e2d6] text-[#1a1a1a] hover:bg-[#862633] hover:text-white hover:border-[#862633] text-sm font-bold font-open-sans leading-[1.6] px-4 py-2 rounded-full transition-colors"
>
{getSocialIcon(link.label)}
{getSocialName(link.label, lang)}
</a>
))}
</div>
</div>
) : null}
</div>
</div>
);
}
83 changes: 83 additions & 0 deletions src/app/(app)/[lang]/kozelet/rendezvenyek/components/EventGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
"use client";

import { useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Media } from "@/payload-types";
import { cn } from "@/lib/utils";

interface EventGalleryProps {
images: Media[];
label: string;
prevLabel: string;
nextLabel: string;
}

export function EventGallery({ images, label, prevLabel, nextLabel }: EventGalleryProps) {
const [startIndex, setStartIndex] = useState(0);
const VISIBLE_DESKTOP = 3;

const canPrev = startIndex > 0;
const canNext = startIndex + VISIBLE_DESKTOP < images.length;

const visibleImages = images.slice(startIndex, startIndex + VISIBLE_DESKTOP);
const emptySlots = Math.max(0, VISIBLE_DESKTOP - visibleImages.length);

return (
<div className="flex flex-col gap-1">
<p className="font-open-sans font-bold text-sm text-[#9a9a9a] leading-[1.6]">{label}</p>
<div className="flex items-center gap-2 md:gap-4">
<button
onClick={() => setStartIndex(Math.max(0, startIndex - 1))}
disabled={!canPrev}
className={cn(
"shrink-0 text-[#1a1a1a] transition-opacity rounded-full",
!canPrev && "opacity-20 cursor-not-allowed"
)}
aria-label={prevLabel}
>
<ChevronLeft className="w-8 h-8 md:w-12 md:h-12" />
</button>

<div className="flex flex-1 gap-2 md:gap-4 min-w-0 overflow-hidden">
{visibleImages.map((media, idx) => (
<div
key={media.id ?? idx}
className="flex-1 relative rounded-2xl border border-[#e9e2d6] overflow-hidden bg-[#f9f4f0]"
style={{ aspectRatio: "4/3" }}
>
{media.url && (
<Image
src={media.url}
alt={media.alt || ""}
fill
className="object-cover"
sizes="(max-width: 768px) 80vw, 30vw"
/>
Comment on lines +49 to +56

@coderabbitai coderabbitai Bot Jul 13, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Performance & Scalability | 🟡 Minor | ⚡ Quick win

sizes prop doesn't match the mobile layout.

Three images are displayed side-by-side on all breakpoints (each flex-1), making each image roughly 30vw on mobile. However, sizes="(max-width: 768px) 80vw, 30vw" tells the browser to fetch an 80vw-wide image on mobile — roughly 2.6x wider than needed, causing unnecessary bandwidth usage.

⚡ Proposed fix 
               <Image
                 src={media.url}
                 alt={media.alt || ""}
                 fill
                 className="object-cover"
-                sizes="(max-width: 768px) 80vw, 30vw"
+                sizes="(max-width: 768px) 30vw, 30vw"
               />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{media.url && (
<Image
src={media.url}
alt={media.alt || ""}
fill
className="object-cover"
sizes="(max-width: 768px) 80vw, 30vw"
/>
{media.url && (
<Image
src={media.url}
alt={media.alt || ""}
fill
className="object-cover"
sizes="(max-width: 768px) 30vw, 30vw"
/>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(app)/[lang]/kozelet/rendezvenyek/components/EventGallery.tsx around
lines 49 - 56, Update the Image component’s sizes prop in EventGallery so it
reflects the three-column flex layout at every breakpoint: use approximately
30vw for mobile and desktop instead of declaring 80vw on screens up to 768px.

)}
</div>
))}
{Array.from({ length: emptySlots }).map((_, idx) => (
<div
key={`empty-${idx}`}
className="flex-1 hidden md:block rounded-2xl border border-[#e9e2d6] bg-[#f9f4f0]"
style={{ aspectRatio: "4/3" }}
/>
))}
</div>

<button
onClick={() => setStartIndex(Math.min(images.length - 1, startIndex + 1))}
disabled={!canNext}
className={cn(
"shrink-0 text-[#1a1a1a] transition-opacity rounded-full",
!canNext && "opacity-20 cursor-not-allowed"
)}
aria-label={nextLabel}
>
<ChevronRight className="w-8 h-8 md:w-12 md:h-12" />
</button>
</div>
</div>
);
}
33 changes: 33 additions & 0 deletions src/app/(app)/[lang]/kozelet/rendezvenyek/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
export default function Loading() {
return (
<div className="min-h-screen bg-[#f9f4f0]">
<div className="container mx-auto px-2 md:px-4 py-8">
{/* PageHeader skeleton */}
<div className="w-full">
<div className="w-full bg-[#fffefc] border-t border-x border-[#e9e2d6] px-6 py-4 md:px-8 rounded-t-2xl">
<div className="h-9 w-24 bg-gray-200 rounded-full animate-pulse" />
</div>
<div className="w-full bg-[#862633] border border-[#e9e2d6] p-6 md:p-8 flex flex-col gap-3">
<div className="h-9 w-2/3 bg-white/20 rounded animate-pulse" />
<div className="h-5 w-full bg-white/15 rounded animate-pulse" />
<div className="h-5 w-4/5 bg-white/15 rounded animate-pulse" />
</div>
</div>

{/* Event card skeletons */}
<div className="bg-[#fffefc] border-b border-x border-[#e9e2d6] rounded-bl-2xl rounded-br-2xl p-6 md:p-8 flex flex-col gap-6">
{Array.from({ length: 2 }).map((_, i) => (
<div key={i} className="w-full animate-pulse">
<div className="bg-[#fffefc] border-t border-x border-[#e9e2d6] px-8 py-4 rounded-tl-lg rounded-tr-lg h-[77px]" />
<div className="h-[200px] md:h-[312px] border-x border-[#e9e2d6] bg-gray-200" />
<div className="bg-[#fffefc] border border-[#e9e2d6] px-8 py-4 rounded-bl-lg rounded-br-lg flex flex-col gap-6">
<div className="h-20 bg-gray-100 rounded" />
<div className="h-64 bg-gray-100 rounded" />
</div>
</div>
))}
</div>
</div>
</div>
);
}
Loading