<!-- source-hash: e35b5566a5ac5d477a67495f201ffd48 -->
A React client component that renders a clickable vendor button with logo and title, supporting two visual variants (`default` and `compact`) and two navigation modes (external URL or callback).

## Key Components

### `VendorDisplayButtonProps`

| Prop | Type | Description |
|------|------|-------------|
| `vendor` | `VendorWithMedia` | Vendor data including slug, title, and media |
| `onClick` | `(vendorSlug: string) => void` | Callback invoked with the vendor slug (used when no `externalUrl`) |
| `variant` | `'default' \| 'compact'` | Visual size variant; defaults to `'default'` |
| `externalUrl` | `string` | Caller-resolved platform base URL; opens `{externalUrl}/vendor/{slug}` in a new tab |

### `VendorDisplayButton`

Exported named component. Renders either:
- **`compact`** — pill-shaped button (`rounded-full`) with a 20×20px logo, suited for inline teaser contexts.
- **`default`** — card-style button (`rounded-lg`) with a 24×24px logo in an 8×8 container, suited for list or grid layouts.

Both variants fall back to an uppercase initial letter when no logo is available, and route clicks through a shared `handleClick` that prefers `externalUrl` over the `onClick` callback.

## Usage Example

```typescript
// External URL navigation (opens OpenMSP vendor page in new tab)
<VendorDisplayButton
  vendor={vendorWithMedia}
  externalUrl="https://openmsp.ai"
/>

// Compact variant with local callback
<VendorDisplayButton
  vendor={vendorWithMedia}
  variant="compact"
  onClick={(slug) => router.push(`/vendors/${slug}`)}
/>
```

> **Note:** `externalUrl` should be a fully-qualified, scheme-normalized URL (e.g. `https://openmsp.ai`) — not a scheme-less string — to avoid the relative `window.open()` bug that existed with the removed `NEXT_PUBLIC_OPENMSP_URL` environment variable.