A responsive card component that displays a lead section alongside two stat cells in a structured row layout, adapting from a stacked column on mobile to a horizontal row on desktop. ## Key Components | Export | Type | Description | |---|---|---| | `InfoCardRow` | Component | Main card row with a lead section and two stat cells | | `StatCell` | Internal Component | Individual stat cell rendering title, caption, and optional icon | | `InfoCardRowSection` | Interface | Shape for each section: `title`, `caption`, and optional `icon` | | `InfoCardRowProps` | Interface | Props for `InfoCardRow`: `lead`, `stats` (tuple of 2), `className` | ## Usage Example ```typescript import { InfoCardRow } from './info-card-row' import { ServerIcon, CpuIcon, MemoryIcon } from './icons' export function DeviceStats() { return ( , }} stats={[ { title: 'CPU Usage', caption: '42%', icon: , }, { title: 'Memory', caption: '8.2 GB', icon: , }, ]} className="my-4" /> ) } ``` ## Layout Behavior - **Mobile:** Lead section stacks above the two stat cells (column direction); icons render inline next to captions - **Desktop (`md:`):** All three sections sit side-by-side (row direction); icons float to the right of text **Source:** [`packages/ui/info-card-row.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/packages/ui/info-card-row.tsx)