<!-- source-hash: 590a86864f3606344569842b53130fe9 -->
A client-side React component for managing a dynamic list of social media profile links, supporting platform selection, URL input, and visibility controls.

## Key Components

### Exported Interfaces

- **`SocialLink`** — Represents a single social link entry with `platform`, `url`, optional `username`, and `visibility` (`'external' | 'internal'`).
- **`SocialPlatform`** — Describes a platform definition (typically fetched from a database) with fields like `id`, `name`, `display_name`, `icon_name`, `url_pattern`, `placeholder`, and `enabled`.

### Component

- **`SocialLinksManager`** — Main component accepting:
  - `links` — Current array of `SocialLink` entries
  - `onChange` — Callback invoked with the updated links array on any mutation
  - `platforms` — Optional array of `SocialPlatform` definitions (defaults to empty; pass dynamic data from your API)
  - `className` — Optional CSS class override

### Internal Helpers

- **`addLink`** — Appends a new empty link defaulting to the first available platform.
- **`removeLink(index)`** — Removes the link at the given index.
- **`updateLink(index, field, value)`** — Mutates a specific field on a link entry immutably.
- **`getIcon(link, platform?)`** — Resolves the correct icon component from `iconMap` using `platform.icon_name` or `link.platform` as a fallback.

### `iconMap`

A static mapping from platform key strings to icon components, covering: `linkedin`, `github`, `twitter`, `reddit`, `slack`, `whatsapp`, `website`, `youtube`, `instagram`, `facebook`, `discord`, `telegram`, `tiktok`, `email`/`mail`.

## Usage Example

```typescript
import { SocialLinksManager, SocialLink, SocialPlatform } from './social-links-manager';

const platforms: SocialPlatform[] = [
  {
    id: '1',
    name: 'linkedin',
    display_name: 'LinkedIn',
    icon_name: 'linkedin',
    placeholder: 'https://linkedin.com/in/username',
    enabled: true,
  },
  {
    id: '2',
    name: 'github',
    display_name: 'GitHub',
    icon_name: 'github',
    placeholder: 'https://github.com/username',
    enabled: true,
  },
];

function ProfileEditor() {
  const [links, setLinks] = useState<SocialLink[]>([]);

  return (
    <SocialLinksManager
      links={links}
      onChange={setLinks}
      platforms={platforms}
    />
  );
}
```

**Visibility note:** Links with `visibility: 'internal'` are intended for company-hub rendering only and should be filtered server-side before exposing to external consumers.

**Source:** [`social-links-manager.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/social-links-manager.tsx)