Canonical single-row presentation component for a ClickUp delivery item, serving as the shared visual primitive across the `/bug-fixes-and-enhancements` delivery table and HubSpot ticket linked-delivery cards.
## Key Components
### `DeliveryRow` (exported component)
Renders a delivery item's title, subtitle, description, status badge, and task-type badge in a responsive two-column layout. Conditionally renders as a clickable `` (env-aware embed shim) or a plain `
` based on the `href` prop.
### `DeliveryRowProps` (exported interface)
| Prop | Type | Description |
|---|---|---|
| `item` | `DeliveryItem` | The delivery data to render |
| `href` | `string?` | When set, wraps the row in a `` for deep-linking |
| `caption` | `string?` | Uppercase label above the title (e.g., `"LINKED DELIVERY"`) |
| `id` | `string?` | DOM id for `scrollIntoView` targeting (e.g., `delivery-`) |
| `className` | `string?` | Additional Tailwind classes merged via `cn()` |
### `getRelativeTime` (internal)
Converts a Unix timestamp to a human-readable relative string (`"today"`, `"yesterday"`, `"3 days ago"`, etc.).
## Usage Example
```typescript
// Standard list rendering (DeliveryTable)
// Ticket-side linked-delivery card with deep-link and caption
```
**Key behaviors:**
- `href` present → outer element becomes a `` (soft Next.js navigation, preserves TanStack Query state on back)
- `id` present → enables `useScrollToHash` targeting; `scroll-mt-24` offset is always applied
- Highlighted state (flash-focus pulse) is applied by the consuming component via `className`