Photo Gallery
A stay's photos: three on the page with See all photos, and every photo in the kit's overlay, filtered by where it was taken.
Preview
The covers stand in for the stay's photos.
Usage
import { PhotoGallery } from "zostel-ui";
<PhotoGallery
title="Zostel Manali"
photos={[{ src, alt, group: "The house" }, { src, alt, group: "6 bed mixed dorm" }, …]}
/>
{/* from a room's picture: open on that room */}
<PhotoGallery title={stay} photos={photos} open={open} onOpenChange={setOpen} initialGroup="6 bed mixed dorm" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The stay’s name: the gallery’s title. |
photos | { src: string; alt: string; group?: string }[] | — | Every photo, with what it shows and where it was taken. The first three go on the page. |
buttonLabel | string | "See all photos" | The button’s words; the count follows. |
open · onOpenChange · initialGroup | boolean · (open) => void · string | — | Open it from elsewhere (a room’s picture), on one group’s photos: initialGroup only seeds the filter as it opens, then the pills take over, and a group no photo has opens on all. Closing it gives the focus back to whatever opened it. The count under the title is a status: a filter’s new count is heard. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
titlestringThe stay’s name: the gallery’s title.
photos{ src: string; alt: string; group?: string }[]Every photo, with what it shows and where it was taken. The first three go on the page.
buttonLabelstring"See all photos"The button’s words; the count follows.
open · onOpenChange · initialGroupboolean · (open) => void · stringOpen it from elsewhere (a room’s picture), on one group’s photos: initialGroup only seeds the filter as it opens, then the pills take over, and a group no photo has opens on all. Closing it gives the focus back to whatever opened it. The count under the title is a status: a filter’s new count is heard.
classNamestringMore classes, merged with the component’s own (tailwind-merge).
On zostel.com
A stay’s page opens on its photos, and every room’s picture opens its own. The overlay is the kit’s one pattern (the whole screen on a phone), the filters are the brand pills, and the grid scrolls on its own and takes the keyboard.