<!-- source-hash: 8742c38ee7680d3664638dd468a8ed67 -->
A client-side React component that renders a styled badge identifying the source platform of content, with platform-specific icons, colors, and sizing options.

## Key Components

- **`PlatformBadge`** — Main exported component that renders a rounded pill badge with an icon and optional label
- **`PlatformIcon`** — Internal component that resolves the correct logo/icon for a given platform ID
- **`sizeClasses`** — Size variant map (`xs`, `sm`, `md`) controlling container padding, icon dimensions, and text size
- **`platformColors`** — Color theme map per platform, defining background, border, and text Tailwind classes

### Supported Platforms

| Platform ID | Color |
|---|---|
| `openmsp` | Yellow `#FFC008` |
| `flamingo` / `flamingo-teaser` | Pink `#FF006E` |
| `openframe` | Cyan `#00D9D9` |
| `tmcg` | Magenta `#F357BB` |
| `company-hub` | Red `#f36666` |
| `marketing-hub` | Magenta `#F357BB` |
| `product-hub` | Green `#5EA62E` |
| `revenue-hub` | Yellow `#FFC008` |
| `people-hub` | Teal `#5EFAF0` |
| `universal` (fallback) | Gray `#6B7280` |

## Usage Example

```typescript
import { PlatformBadge } from './platform-badge';

// Basic usage with label
<PlatformBadge
  platform={{ id: '1', name: 'flamingo', display_name: 'Flamingo' }}
  size="sm"
  showLabel={true}
/>

// Icon-only, larger size
<PlatformBadge
  platform={{ id: '2', name: 'openframe', display_name: 'OpenFrame' }}
  size="md"
  showLabel={false}
/>

// With custom class override
<PlatformBadge
  platform={{ id: '3', name: 'openmsp', display_name: 'OpenMSP' }}
  size="xs"
  className="opacity-75"
/>
```