FEAT: Add Image Gallery Section

naumch1k commented 1 month ago

Description

This PR introduces Gallery section.

Changes Made

Refactored MerchItem's full size image button into LightboxButton UI component
Provided Modal component with an additional variant prop that accepts lightbox or dialog as a value
Replaced OverlayToggle with ✕ button
Updated FocusLock component to blur last active element when modal closes

Screenshots, GIFs, or videos

https://github.com/naumch1k/one-fall/assets/76534205/12f5e96f-98a2-4825-bca5-e93fce0cc6c6

To ensure a consistent appearance across various screen sizes, an additional picture is dynamically rendered when eight images do not evenly fill three rows.

https://github.com/naumch1k/one-fall/assets/76534205/88dfbdcd-acba-41d7-9b32-cc3336cc80f5

netlify[bot] commented 1 month ago

Deploy Preview for one-fall ready!

Name	Link
Latest commit	6b9adff7018a8c8965bc4b22b43dae002416819b
Latest deploy log	https://app.netlify.com/sites/one-fall/deploys/6684a907f7e5e60008156b28
Deploy Preview	https://deploy-preview-9--one-fall.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

naumch1k commented 4 weeks ago

Hey @Yura33-dev 👋

I’ve finished working on the Gallery section. I know the pull request is quite vast: I’ve refactored the modal window, moved the modal window opening button into a separate UI component, also adjusted some keys in the data.json files for merch and gallery sections to reuse the existing logic as much as possible.

Could you please glance through my code to see if there’s anything I might have missed? Maybe you could also try it on your devices to confirm everything works well?

Thanks!

naumch1k / one-fall