A labeled info card component that renders a vertical stack of `label ── value` rows inside a bordered card, supporting plain text, assignee pickers, status dropdowns, and arbitrary custom content as row values. ## Key Components ### Exported Types | Type | Description | |---|---| | `InfoSectionTextValue` | Plain text value with optional avatar, icon, click handler, or link | | `InfoSectionAssigneeValue` | Inline assignee picker (wraps `AssigneeDropdownProps`) | | `InfoSectionStatusValue` | Inline status dropdown (wraps `TicketStatusTagProps`) | | `InfoSectionCustomValue` | Arbitrary `React.ReactNode` content | | `InfoSectionValue` | Union of all four value types | | `InfoSectionRow` | Single row with `id`, `label`, and `value` | | `InfoSectionProps` | Component props: optional `title`, `rows`, `className` | ### Internal Components - **`TextValue`** — Renders text values with optional leading icon, trailing avatar, link (`href`), or button (`onClick`) - **`RowValue`** — Switches on `value.type` to delegate to `AssigneeDropdown`, `TicketStatusTag`, `TextValue`, or custom content ### Main Export - **`InfoSection`** — The card container; renders an optional caption and maps `rows` into label/divider/value triplets ## Usage Example ```typescript import { InfoSection } from './info-section' import { UserIcon } from 'lucide-react' , href: '/orgs/acme', }, }, { id: 'notes', label: 'Notes', value: { type: 'custom', content: }, }, ]} /> ```