[Feature] Create Event Gallery Row Component #165
Description
User story
As a user,
I want to see a preview of each event's gallery in a single, organized row,
so that I can view key event details and a sample of photos before deciding to view the full gallery.
Acceptance criteria
- The component displays the event's name, date (month, date) - year displayed separately, and location in a header section for the row.
- Below the header, the component displays the first few images from the event's gallery inside a horizontal carousel.
- The carousel includes "next" and "previous" buttons to scroll through all the images for that event.
- When a user hovers over an image in the carousel, it enlarges smoothly. The adjacent images (to the left and right) also enlarge slightly, but less than the hovered image, creating a "focus" effect.
- The specific hover animation and enlarged appearance should match the design in the Figma mockups.
- A "view all photos" button should route to the corresponding events gallery page to view all photos for that event.
- The entire component is responsive, adjusting the size of the images and layout for mobile, tablet, and desktop screens.
Definition of done
- Acceptance criteria met
- Agreed tests written
- Agreed documentation in GitHub wiki
- PR reviewed
- Merged into the main/feature branch
Notes
- Styling: All styles, especially the complex hover animations, must be implemented in GalleryRow.module.css using global CSS variables.
- Figma Reference: The design for the row layout, typography, carousel, and especially the hover effect is critical. Link: [Link to your Figma design here]
- Props: The component should accept an event object prop containing its details and an array of image URLs, e.g.,
event: { name: '...', date: '...', location: '...', images: ['url1', 'url2'] }.