A client-side React component that renders a horizontal row of social media icon buttons, supporting both link-based navigation and action callbacks with optional compact and grouped layouts. ## Key Components ### Types - **`SocialLink`** — Discriminated union type ensuring each entry has either an `href` (anchor) or `onClick` (action callback), never both or neither. Supports `visibility` (`"external"` | `"internal"`) for grouping. - **`SocialIconRowProps`** — Component props including `links`, `variant`, `compact`, and `groupByVisibility`. ### Functions - **`renderSocialIcon(platform)`** — Maps a platform string (case-insensitive) to the corresponding icon component. Falls back to `GlobeIcon` for unknown platforms. Supported platforms: `github`, `twitter`/`x`, `reddit`, `linkedin`, `luma`, `whatsapp`, `email`/`mail`, `website`/`web`/`url`, `slack`, `discord`, `telegram`, `youtube`/`yt`, `instagram`/`ig`, `facebook`/`fb`, `copy`. - **`SocialIconRow`** — Main exported component. ### Props | Prop | Type | Default | Description | |---|---|---|---| | `links` | `SocialLink[]` | GitHub, LinkedIn, Facebook | Array of social link definitions | | `variant` | `"accent"` \| `"outline"` \| `"transparent"` \| `"destructive"` | `"outline"` / `"transparent"` | Button variant; defaults to `"transparent"` in compact mode | | `compact` | `boolean` | `false` | 32px ghost icon buttons with tight `gap-2` for metadata/identity rows | | `groupByVisibility` | `boolean` | `false` | Splits external and internal links with a divider when both groups are present | ## Usage Example ```typescript import { SocialIconRow } from './social-icon-row'; // Default full-width card row // Compact author header row with custom links navigator.clipboard.writeText(window.location.href), }, ]} /> // Grouped: external links / divider / internal-only links ```