components / file-grid
file-grid.
asset-browser grid of stacked-paper file cards with press-and-drag-to-trash delete (pointer-driven, so it never triggers native link-drag; the trash zone only appears while dragging) and a type-the-name-to-confirm dialog. composes file-card, input, and button.
installation
bunx @justin06lee/chrome@latest add file-gridprops
| name | type | default | description |
|---|---|---|---|
| files * | FileGridFile[] | - | the files to render: { id, name, href?, meta? }[]. extra fields ride along into onDelete/renderCard (the component is generic over the file type). |
| onDelete | (file: T) => void | Promise<void> | - | enables deleting: press-and-drag a card onto the trash zone (which appears only while dragging), then type the exact file name to confirm. may be async — the dialog shows a pending state and a rejection surfaces inline. |
| renderCard | (file: T) => ReactNode | - | replaces the default file-card render for each file. |
| linkComponent | React.ElementType | 'a' | anchor element/component forwarded to the default card — pass your router's Link. |
| trashPosition | 'corner' | 'viewport' | 'corner' | where the trash drop zone sits while dragging: pinned inside the grid's corner, or fixed to the viewport's bottom right. |
| emptyLabel | string | 'no files yet.' | shown when files is empty. |
| className | string | - | overrides on the root element. |