Square Grid Profile Gallery Block for React

Each post in POSTS, REELS and SAVED has a title, a caption, a handle, an ISO date, a count of pictures, a pinned flag, a reel length in clip and a scene. Add your image's address and replace the Scene in the square and in the viewer with an <img> (alt="" in the square, whose button is named; alt set to the caption in the viewer). The comment above Scene says where.

It is a toggle with an aria-pressed state: it fills with the foreground, swaps its icon for a tick, and adds one to the follower count, which a polite line also announces. Pressing it again takes the follow back. Nothing is sent anywhere; wire the handler to your own follow request.

There is one dialog. A square sets the tab and the position and opens it; Previous, Next, the arrow keys (mirrored in a right-to-left layout), Home, End and a swipe move through that tab's posts, wrapping around. Closing it returns focus to the square of the post last shown. On a phone the viewer fills the screen.

No. Each tab's grid is also in the page as an unseen set of empty squares, stacked in the same grid cell as the live panels: the tallest sets the height. Posts has nine drawings, so the other two tabs sit on the same height.

No, and the viewer says so: a reel is a poster with a play mark and a length, with the text "this demo has no video". Put your video in the viewer's stage where the drawing is.

The tabs are arrow-key navigable (Home and End too). Every square is a button, so Tab reaches each one and Enter or Space opens the viewer; its Tab order is the close button, Previous and Next. The marks on a square are decorative; the button's name says "pinned", the picture count and the reel length.