A client-side React component that renders a styled badge for various Flamingo platform identifiers, combining a platform-specific icon with optional display label and color-coded styling. ## Key Components ### `PlatformBadge` (exported) Main component accepting a `platform` object, `size`, `showLabel`, and `className` props. Returns `null` if no platform is provided. ### `PlatformIcon` (internal) Maps platform IDs to their corresponding logo components (`FlamingoLogo`, `OpenmspLogo`, `OpenFrameLogo`, `MiamiCyberGangLogoFaceOnly`) or falls back to a `Globe` icon from Lucide. ### `platformColors` (internal) Color map keyed by platform name, providing Tailwind-compatible `bg`, `border`, and `text` classes for each platform's brand color. ### `sizeClasses` (internal) Three-tier size configuration (`xs`, `sm`, `md`) defining container padding, icon dimensions, and text sizing. ## Supported Platforms | Platform ID | Color | |---|---| | `flamingo` / `flamingo-teaser` | Pink `#FF006E` | | `openframe` | Cyan `#00D9D9` | | `openmsp` | Amber `#FFC008` | | `tmcg` | Pink `#F357BB` | | `company-hub` | Red `#f36666` | | `product-hub` | Green `#5EA62E` | | `people-hub` | Teal `#5EFAF0` | | `universal` | Gray (fallback) | ## Usage Example ```typescript import { PlatformBadge } from './platform-badge'; // Basic usage // Icon-only, large // With custom class override ``` ## Source [`platform-badge.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/platform-badge.tsx)