Item cards
Default
States
Status variants
Draft variant
Grid layouts
Compound API
| Component | Props | Description |
|---|---|---|
<ItemCard> | item, locale?, showSeller? | Root provider. Computes URL, image, pricing, and shares via context. |
<ItemCardImage> | children? | Image area with link. Overlay children (Favorite, Status) are positioned absolutely. |
<ItemCardFavorite> | isFavorite, toggleAction | Controlled heart button. Caller owns favorite state and toggle logic. |
<ItemCardStatus> | — | Status badge overlay. Auto-shows/hides based on item.status. |
<ItemCardContent> | children | Text area wrapper. Handles seller hover animation when showSeller is true. |
<ItemCardTitle> | — | Linked item name. Truncates with ellipsis. |
<ItemCardAttributes> | — | Brand, size, condition metadata row. |
<ItemCardPrice> | — | Formatted price. Auto-hides for cancelled items. |
<ItemCardSeller> | — | Composition marker. Seller overlay is rendered by ItemCardContent when showSeller is true. |
<ItemCardActions> | deleteAction | Edit/delete actions. Draft items show "Continue editing" + delete. Non-deletable statuses hide the delete button. |
Item data shape
| Field | Type | Description |
|---|---|---|
| id | string | Unique item ID |
| publicId | number | Public-facing numeric ID used in URLs |
| name | string | Item title displayed on card |
| description | string | null | Optional item description |
| price | number | Price in cents |
| slug | string | null | URL-friendly slug, appended to /items/publicId- |
| imageUrl | string | null | Legacy fallback image URL (used when itemImages is empty) |
| itemImages | Array | null | Ordered image array with url, altText, and rotation. First image is used as cover. |
| brand | { name } | null | Brand from brands table |
| customBrandName | string | null | Free-text brand name fallback when brand is null |
| condition | { name } | null | Item condition (new, like new, good, fair, poor) |
| sizeLabel | string | null | Size displayed in the metadata row (e.g. "M", "42", "G") |
| deliveryCost | number | null | Delivery cost in cents |
| freeShipping | boolean | null | When true, delivery cost is excluded from price |
| favoritesCount | number | null | Number of favorites for the heart button |
| status | string | Item status (available, sold, reserved, shipped, delivered, draft, cancelled). Drives URL, StatusBar, Price visibility, and Actions layout. |