<!-- source-hash: 841435ad2eb230c8516130a8d58de981 -->
A reusable UI component that renders a single labeled row with a value, connected by a horizontal dotted separator line — commonly used for displaying key-value metadata in detail panels or cards.

## Key Components

### `InfoRow`
A client-side React component that accepts the following props:

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `label` | `string` | ✅ | Left-aligned label text |
| `value` | `string` | ✅ | Right-aligned value text |
| `icon` | `React.ReactNode` | ❌ | Optional icon rendered inline after the value |

## Usage Example

```typescript
import { InfoRow } from "@/components/info-row"
import { Globe } from "lucide-react"

export function DeviceDetails() {
  return (
    <div className="flex flex-col gap-2">
      <InfoRow label="Hostname" value="workstation-01" />
      <InfoRow label="IP Address" value="192.168.1.100" />
      <InfoRow
        label="Status"
        value="Online"
        icon={<Globe className="w-4 h-4 text-green-400" />}
      />
    </div>
  )
}
```

## Layout Behavior

- **Label** — left side, truncates with ellipsis on overflow
- **Separator** — flexible `1px` horizontal line that fills available space between label and value
- **Value + Icon** — right side, truncates with ellipsis, icon rendered inline after text