shadcn.io is not affiliated with official shadcn/ui
Submission Wall Gallery Block for React Aria
A framed wall of a camera club's six newest entries under Latest and Featured tabs, beside a real form with a handle, a caption and a file drop zone that puts your entry first as pending review for this visit, never posting anything.
Installation
Overview
A submission wall for React with React Aria, for Lensmoor, a camera club. A split behind a divider: at the start a framed wall, with + marks on its corners, of the club's newest six entries on shared hairlines under Latest and Featured tabs, each a drawn picture with the member's initials and handle, a line of caption and a "Featured" badge on some; at the end a real form with a handle, a line about the picture and the catalog file drop zone. Submitting checks the fields (an empty submit says what is missing and focuses the first problem), then puts your entry first on the wall as "Pending review" for this visit, switches to Latest and says so in a polite line. The picture you pick is never opened or sent: the block draws a stand-in from its name. Nothing is posted or saved, and there are no moderation tools; "Remove mine" takes your entries back off the wall. On a phone the wall comes first with its four newest entries, and the form follows. The pictures are drawn, not photographed, in your theme's greys. It's built from Tabs, FileUpload, Field, Input, Badge, ShineButton and Guides. The club, members and captions are made up for the example.
FAQ
How do I connect it to a real upload?
The block keeps the picked file's name and size in state and never reads it. In submit, send handle, caption and the file to your endpoint, add the entry the server returns to entries, and replace the drawn stand-in (sceneOf) with an <img> of the stored picture. Keep the "Pending review" badge for entries that have not been approved yet, and drop "Remove mine" if you do not want visitors to withdraw entries.
Why does the wall always show six?
So it keeps one height. Latest shows the newest six, so a new entry pushes the oldest off; Featured shows the featured ones and fills the rest with empty cells of the same size. Switching tabs, or adding an entry, never makes the page taller or shorter, and a polite line under the wall says how many are shown.
What does the form check?
The handle must be 2 to 20 letters, numbers, dots or underscores (a leading @ is optional), the line must have at least three characters (up to 80), and a picture must be chosen (images only, up to 10 MB). Each problem is written under its field, in text with an icon rather than colour alone, and the first field with a problem takes focus. Typing clears that field's message.
How does it work with a keyboard?
Tab goes through the fields, the drop zone (Enter or Space opens the file chooser; a picture can also be dropped on it), Remove picture, Add to the wall and Remove mine, then the tabs and the wall. Remove picture and Remove mine stay in the tab order when there is nothing to remove, and do nothing, so focus is never lost. Pressing Remove picture moves focus back to the drop zone.