<!-- source-hash: 5607b9ca5e1826a2e00e830debb04c5d -->
A reusable React component that displays a user's avatar, name, and optional subtitle in a horizontal layout, following the visual pattern used in comment headers and user cards.

## Key Components

- **`UserDisplay`** - Main component that renders a horizontal user information row
- **`UserDisplayProps`** - TypeScript interface defining component props including name, avatar URL, subtitle, size, and styling options
- **`SquareAvatar`** - Imported avatar component for displaying user profile images
- **`cn`** - Utility function for conditional class name merging

## Usage Example

```typescript
import { UserDisplay } from './user-display';

// Basic user display
<UserDisplay name="John Doe" />

// With avatar and subtitle
<UserDisplay 
  name="Jane Smith"
  avatarUrl="/avatars/jane.jpg"
  subtitle="2 hours ago"
/>

// Custom size and styling
<UserDisplay 
  name="Bob Wilson"
  avatarUrl="/avatars/bob.jpg"
  subtitle="Online now"
  size={48}
  className="bg-gray-50 p-2 rounded"
/>

// Handling null/undefined values
<UserDisplay 
  name="Anonymous User"
  avatarUrl={null}
  subtitle={undefined}
/>
```

The component uses DM Sans font styling and includes truncation for long names/subtitles to prevent layout overflow. It's designed to be flexible with optional props while maintaining consistent visual patterns across the application.