Patterns
Media Gallery
A unified grid/list of generated media results (image · video · audio) with status, progress, expiry handling, and download/delete/preview controls.
A unified grid/list surface for generated media results (images, video, audio) with per-item status handling (pending / processing / completed / failed), a progress bar, signed-URL expiry detection, and hover download/delete/preview affordances. One canonical result surface shared across every generation page instead of a hand-rolled gallery per modality. Presentation only — the host owns the data and the download/delete/preview side effects; wire the callbacks, and leave a callback undefined to hide its control.
Import
tsx
1import { MediaGallery } from "@yuhuanowo/yunui/patterns";Example
MediaGallery
A misty pine forest at dawn, volumetric light
flux-schnell•1024×1024
Retro-futuristic city skyline, neon reflections
flux-schnell•1024×1024
Loading...
Processing…Isometric cozy reading nook, soft afternoon light
flux-schnell•1024×1024
Generation failedContent policy violation
Abstract fluid gradient wallpaper
flux-schnell•1024×1024
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| empty | ReactNode | — | Rendered in place of the grid when `items` is empty. |
| items* | MediaResult[] | — | The results to display, newest-first is conventional. |
| labels | MediaGalleryLabels | — | Localized copy for status/aria strings. |
| onDelete | ((item: MediaResult) => void) | — | Show a delete control per item. |
| onDownload | ((item: MediaResult) => void) | — | Show a download control per completed item. |
| onPreview | ((item: MediaResult) => void) | — | Make completed items clickable (e.g. open a lightbox). |
| onViewModeChange | ((mode: "grid" | "list") => void) | — | Called when the built-in grid/list toggle is used (renders the toggle). |
| title | ReactNode | — | Optional heading rendered above the gallery. |
| viewMode | "grid" | "list" | — | Controlled view mode. Omit for uncontrolled (defaults to grid). |