A client-side React component that renders a labeled row with a dotted/line separator between a label and its value, optionally accompanied by an icon.
## Key Components
### `InfoRow`
A presentational component that displays a key-value pair in a horizontal layout with a flexible spacer line between them.
**Props (`InfoRowProps`):**
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `label` | `string` | ✅ | Left-side label text |
| `value` | `string` | ✅ | Right-side value text |
| `icon` | `React.ReactNode` | ❌ | Optional icon rendered inline after the value |
## Usage Example
```typescript
import { InfoRow } from "@/components/info-row"
import { CheckCircleIcon } from "lucide-react"
// Basic usage
// With an icon
}
/>
// Stacked in a detail panel
```
## Notes
- Marked as `"use client"` — must run in a browser context.
- Both label and value truncate with ellipsis (`text-ellipsis`) on overflow, making it safe for long strings in constrained layouts.
- The separator line (`flex-1 bg-ods-border h-px`) expands to fill available space, creating a consistent aligned layout regardless of label/value length.