Tab Categories Gallery Block for React

Each collection carries its layout as data: literal classes for where the cover, the copy and the row of four sit from the large breakpoint, so one Panel draws all four. Cover at the start, across the top, at the end, and a tall one at the start. The reading order never changes: the cover is first in the markup, then the copy, then the row.

A collection lists the pictures shown on its page (a cover and four more) and a count of the others in the library, elsewhere. The badge adds them up, and the status line says it too after each tab. The other nine are example data: this block doesn't draw them, and the "Open the collection" button and the pictures are links (href="#") for you to point at your pages.

An unseen copy of all four pages (hidden from assistive technology and from the keyboard) sits in the same cell as the open page, so the block is always as tall as the tallest page and the tabs never move. Each page stretches to fill that height.

The tabs follow the usual pattern: Tab reaches the chosen tab, the arrow keys move between tabs (mirrored in a right-to-left layout), Home and End jump to the ends, and Tab again enters the page, where the button and the four pictures are links in reading order.

The tab band scrolls sideways if it has to. In a page, the cover comes first, then the name, the copy and the button, and the four more pictures become a snap row you swipe, with the next picture peeking.

Each picture is typed data with a description (its alt text), a scene and a ratio. Add your image's address to it, then replace the Scene in its tile with <img alt="" className="size-full object-cover" src={…} />: the caption already names the picture, and the role="img" wrapper's label can move to the alt. The comment above Scene says where. Tiles crop to a fixed shape, so keep object-cover.