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.
| }: Readonly<ArrowRightIconProps>) { | ||
| return ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" |
There was a problem hiding this comment.
Footer PR #53 imported the MUI icons library, and main's events page already uses react-icons/fa6 (FaClock, FaLocationDot). Could you swap this custom SVG for an icon from one of those libraries (e.g. MUI's ArrowForwardIcon or react-icons' FaArrowRight)? Worth doing the same for the location pin SVG at PastEventCard.tsx:56-67, the calendar SVG at PastEventCard.tsx:75-86, and the magnifying glass at PastEventsSection.tsx:50-62.
| Past Events | ||
| </h2> | ||
|
|
There was a problem hiding this comment.
Since we're keeping your search + filter implementation over the ones in #42, this <h2> is the one to keep. Just a heads up that after rebase, you'll need to delete the matching <h2> and wrapping <section className="mt-16 ..."> from web/src/app/events/page.tsx on main (lines ~58-75) so we don't end up with the heading twice. Also can delete EventSearchInput.tsx, EventCategoryFilters.tsx, EventCategoryButton.tsx, and the related useState for selectedPastEventCategory/eventSearchQuery from page.tsx those are all superseded by your PastEventsSection.
| 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.
| const TAG_COLOURS: Record<PastEventTag, string> = { | ||
| Food: 'bg-ssa-red/80', | ||
| Community: 'bg-ssa-red-light/80', | ||
| Games: 'bg-ssa-red/80', | ||
| AGM: 'bg-ssa-red-light/80', |
There was a problem hiding this comment.
The Food and Games tags are a darker red whereas the Community and AGM are a ligher red, should they be kept 1 colour for consistency or each tags has their own colour?
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.