shadcn.io is not affiliated with official shadcn/ui
Shared Media Panel Block for React Aria
A group's media shelf in a panel: a viewer band with the chosen drawn photo, Previous and Next, then Photos, Files and Links tabs with derived counts, a Shared by filter and an empty state at the same height.
Installation
Overview
Gather everything a group has shared into one place, with this shared media panel for React with React Aria. A header names the group, Ridge Hikers on Keepbox, with a Shared by filter at its end, and a panel with a corner mark on each corner holds a viewer band with the chosen photo large (a drawn greyscale scene), a caption such as "Photo 3 of 12, shared by Callum, 12 Sep" and Previous and Next buttons that the arrow keys also work on. Below it Tabs split Photos (12), Files (5) and Links (4), with counts derived from the lists: photos are a grid of twelve drawn scenes you press to view, files are rows with a "Copy file name" button, and links are rows with a two-letter host tile. Filtering by person narrows all three and a filter that finds nothing shows an Empty state in the same height. The panel is ruled by Guides. It's the starting point for a media tab in any conversation.
FAQ
What stays in the page, and how do I make it real?
Everything. The photos are drawn scenes, the file names are text and nothing is uploaded or downloaded; Copy file name copies the name only. To wire it for real, list the conversation's attachments from your server grouped by type, show thumbnails for the photos, and open files and links in your own handlers.
How does the viewer work?
It shows the chosen photo from the filtered list, with a caption of its position, sender and date. Previous and Next wrap round the list, and the horizontal arrow keys step it while focus is on either button (they swap in an RTL page). It is a band in the panel, not a dialog, so the page behind it never changes.
What does the Shared by filter do?
It narrows the photos, files and links together to one person, updates the viewer to the first photo that person shared when the chosen one is filtered out, and announces the three counts. A person with nothing in a tab gets the empty state in the same 18 rem of height, so switching tabs or filters never moves the foot of the panel.
Where do the counts come from?
They are the lengths of the three typed lists, written into the tab names, and the viewer shows how many photos match the filter. Add a photo, file or link to the data and every count follows.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. Photos are buttons named "Photo 3, shared by Callum" with the chosen one marked current, the tabs are real tabs, and the status line repeats the viewer's caption.