Bucket List
Object-storage buckets, with public access rendered as a warning rather than as one small grey tag among five. Every storage breach of the last decade is a bucket nobody realised was world-readable.
src/components/ui/bucket-list.tsxAbout
From the component's own source, where it was written.
Object-storage buckets, with the fact that matters first.
That fact is **public or not**. Every storage breach of the last decade is some version of a bucket nobody realised was world-readable, and a list that renders access as a small grey tag among five other small grey tags is how it stays unnoticed. Public buckets get a warning treatment, not a label.
Region is shown because it is immutable and expensive to get wrong — a bucket in the wrong region is a migration, not a setting — and because latency and data residency both hang off it.
Install
npx astralyx-ui add bucket-list
Usage
import { BucketList } from '@/components/ui/bucket-list'
<BucketList buckets={buckets} onSelect={open} />Composer
Change the props and the source below follows.
No props to configure.
<BucketList buckets={buckets} onSelect={open} />Examples
One bucket is public
<BucketList buckets={buckets} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
BucketList
Object-storage buckets, with the fact that matters first.
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| buckets | Bucket[] | required | { name, region?, size?, objects?, public?, badges?, createdAt? }. |
| onSelect | (bucket: Bucket) => void | — | — |
| selectedName | string | — | — |
| publicLabel | string | 'Public' | — |
| privateLabel | string | 'Private' | — |
| objectsLabel | string | 'objects' | — |
| emptyLabel | string | 'No buckets.' | — |
| format | (bytes: number) => string | formatBytes | — |
| label | string | 'Buckets' | — |
Types
Bucket
| Field | Type | Description |
|---|---|---|
| name | string | — |
| region? | string | Immutable and expensive to get wrong — a bucket in the wrong region is a migration, not a setting. |
| size? | number | Bytes. |
| objects? | number | — |
| public? | boolean | Drawn as a destructive badge with a warning glyph, not a tag. This is the fact the list exists to surface. |
| badges? | ReactNode[] | Object-lock, versioning, whatever your provider calls it. |
| createdAt? | string | Already formatted. |