Feature/past events#72
Conversation
Co-authored-by: Copilot <copilot@github.com>
There was a problem hiding this comment.
Pull request overview
This PR adds a client-side “Past Events” browsing experience to the Events page, including a searchable/filterable grid of past event cards backed by static mock data (intended to be replaced by CMS data later).
Changes:
- Replaced the Events page placeholder with a
PastEventsSectioncontaining search, filter chips, and “View More” pagination. - Added
PastEventCard(event card UI) andArrowRightIcon(shared icon). - Introduced
pastEventsData.tswith types, filter options, and mock past events data.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/app/events/page.tsx | Renders the new Past Events section on the Events page. |
| web/src/app/events/_components/PastEventsSection.tsx | Implements search, filtering, pagination, and responsive grid layout. |
| web/src/app/events/_components/pastEventsData.ts | Adds mock data + types + filter list used by the UI. |
| web/src/app/events/_components/PastEventCard.tsx | Adds a card UI for each past event with image, metadata, tags, and CTA overlay. |
| web/src/app/events/_components/ArrowRightIcon.tsx | Adds a reusable right-arrow SVG icon component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…nctionality Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
joengy
left a comment
joengy
left a comment
There was a problem hiding this comment.
Hey Richamn, really great work on the grid for past events as well as the search bar + filter functionality. Just a heads up you'll have to deal with merge conflicts, but we're going with your implementation of this page so it shouldn't be too hard to fix. I've left some other comments regarding small things to change but it should be pretty easy to implement.
| date: string | ||
| thumbnail: string | ||
| thumbnailAlt: string | ||
| tags: PastEventTag[] |
There was a problem hiding this comment.
Since we're keeping your EVENT_FILTERS over the loose pastEventCategories string array on main, just remember to delete the one in web/src/app/events/page.tsx:12 after rebase.
…d PastEventsSection components
| params: Promise<{ slug: string }> | ||
| } | ||
|
|
||
| export default async function EventGalleryPage({ | ||
| params, | ||
| }: Readonly<GalleryPageProps>) { | ||
| const { slug } = await params |
| /** | ||
| * Maps each tag to a Tailwind background utility from the project palette | ||
| * (defined in globals.css). Keeps a tag's colour stable across cards. | ||
| */ | ||
| const TAG_COLOURS: Record<PastEventTag, string> = { | ||
| Food: 'bg-ssa-red/80', | ||
| Community: 'bg-ssa-red/80', | ||
| Games: 'bg-ssa-red/80', | ||
| AGM: 'bg-ssa-red/80', | ||
| } |
| type="search" | ||
| value={query} | ||
| onChange={(e) => handleQueryChange(e.target.value)} | ||
| placeholder="Search event..." |
| import { FaArrowRight, FaMagnifyingGlass } from 'react-icons/fa6' | ||
| import PastEventCard from './PastEventCard' | ||
| import { EVENT_FILTERS, pastEvents, type EventFilter } from './pastEventsData' |
There was a problem hiding this comment.
Looks really good! Some small UI fixes:
- replace text-white to text-ssa-white
- increase the hover blur and opacity on the image
- make the icons on card same size as text
- bump the card corner radius to match Figma
- add a
#000at 25% opacity overlay across the full image
other than that looks really good thank you!!!
joengy
left a comment
joengy
left a comment
There was a problem hiding this comment.
Code looks ready to be merged. I just made a comment clarifying one tihng otherwise everything else looks good to me.
| /** | ||
| * Maps each tag to a Tailwind background utility from the project palette | ||
| * (defined in globals.css). Keeps a tag's colour stable across cards. | ||
| */ | ||
| const TAG_COLOURS: Record<PastEventTag, string> = { | ||
| Food: 'bg-ssa-red/80', | ||
| Community: 'bg-ssa-red/80', | ||
| Games: 'bg-ssa-red/80', | ||
| AGM: 'bg-ssa-red/80', | ||
| } |
There was a problem hiding this comment.
This is a good point, the design has the tags all in the red and it's being implemented the same way. If that is the case you can just set tags to all be the ssa red by default.
This pull request implements a new "Past Events" section for the events page, featuring a responsive, filterable, and searchable grid of past event cards. The section is built with reusable, accessible React components and uses static mock data for now, with plans to replace it with CMS data in the future. The most important changes are as follows:
Past Events Section Feature:
PastEventsSectioncomponent with search, filtering, and "View More" pagination for browsing past events in a responsive grid layout. The section supports accessibility features and maintains a consistent user experience across filter/search changes.PastEventsSectioninto the mainEventsPage, replacing the placeholder with the actual past events UI.Past Event Card Components:
PastEventCardcomponent to display individual event details, including image, name, location, date, tags, and a hover overlay with a "See Photos" call-to-action.ArrowRightIconas a reusable SVG icon for navigation elements in event cards and buttons.Mock Data and Types:
pastEventsData.tswith TypeScript types (PastEvent,PastEventTag,EventFilter), predefined filter options, and a static array of mock event data to power the UI.