Gallery Component

[vpanyushenko]

On it's most basic form, a gallery with one image is just a standard image preview tool. However, when dealing with multiple images, it would be a good developer experience to just have one component that can do it all. Heres what I'm thinking and for reference here is the web version: https://bubbles-pied.vercel.app/gallery

Basically this will accept an array of images as a prop. There is also a prop for grid which can determine how the images are displayed. Here an example with 5 images:

• grid: 1x1 - this would be the standard gallery with 5 pages
• grid: 2x2 - this would show 4 images and the second page would have 1 image with 3 "blank" squares.

By default we can determine the grid based on the amount of images passed in or the user can hard code something.

When an individual image is clicked, it should open fullscreen on the device. The user should have the option to pass in a button group in case some actions are required here.

[clearly-outsane]

Do we have pagination on mobile? What is considered a 'page' on mobile

[vpanyushenko]

On images, you typically will have some of those bubbles to let you know how many more images there are. Something like this: https://developer.apple.com/design/human-interface-guidelines/components/presentation/page-controls/

[clearly-outsane]

Ah this clears it up thanks!