Asset Grid

A media library as a selectable grid, built on this kit’s Image so every tile gets a placeholder, a reserved box and a failure state. A broken asset stays in the grid — it is exactly the one someone came to find and replace.

src/components/ui/asset-grid.tsx

About

From the component's own source, where it was written.

A media library: images and files as a selectable grid.

The picker half of an asset store. Built on this kit's Image, so every tile gets the placeholder mask, the reserved box and the failure state for free — a grid of raw <img> tags is the fastest way to make a library page jump around while it loads.

**A broken asset stays in the grid.** An image whose URL has rotted is exactly the one someone needs to find and replace, and a library that hides failures makes it invisible while its reference is still live in production.

Selection is controlled and multi-capable, because the operations people actually perform here — delete these six, move these to another folder — are bulk ones.

Install

npx astralyx-ui add asset-grid

Usage

import { AssetGrid } from '@/components/ui/asset-grid'

<AssetGrid assets={assets} value={selected} onValueChange={setSelected} />

Composer

Change the props and the source below follows.

Props

single select

tsx

<AssetGrid
  assets={assets}
  value={selected}
  onValueChange={setSelected}
  single={false}
/>

Examples

Picking assets, one of them broken

tsx

<AssetGrid assets={assets} value={selected} onValueChange={setSelected} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`AssetGrid`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
assets	Asset[]	required	A library that hides failures makes a rotted URL invisible while its reference is still live in production.
value	string[]	—	Controlled selection. Omit both for a read-only library; the tiles then call onOpen instead.
onValueChange	(next: string[]) => void	—	Controlled selection. Omit both for a read-only library; the tiles then call onOpen instead.
single	boolean	false	One at a time.
onOpen	(asset: Asset) => void	—	—
minTile	number	150	The grid is auto-fill, so tiles reflow to the container rather than to a fixed column count.
ratio	number	1	The grid is auto-fill, so tiles reflow to the container rather than to a fixed column count.
emptyLabel	string	'Nothing in this library yet.'	—
format	(bytes: number) => string	formatBytes	—

Types

`Asset`

A media library: images and files as a selectable grid.

Field	Type	Description
id	string	—
src?	string	Image URL, or a thumbnail for a non-image file.
name	string	—
type?	string	MIME type. Drives the fallback glyph when there is no thumbnail.
size?	number	Bytes.
modified?	string	Already formatted.
meta?	ReactNode	Shown on the tile — dimensions, a duration, a tag.