<!-- source-hash: d38fe303fe5fb74d67b5d888ec7ca267 -->
A client-side React component for managing a dynamic list of social media profile links, supporting add, update, and remove operations with platform-aware icons.

## Key Components

### Interfaces

| Interface | Description |
|---|---|
| `SocialLink` | Represents a single link entry with `platform`, `url`, and optional `username` |
| `SocialPlatform` | Describes a platform definition sourced from dynamic data (e.g., database), including `icon_name`, `url_pattern`, and `placeholder` |
| `SocialLinksManagerProps` | Component props: `links`, `onChange` callback, optional `platforms` array, and optional `className` |

### `SocialLinksManager`

The primary exported component. Renders a list of social link rows, each with:
- A platform icon (resolved via `iconMap` using `icon_name` from `SocialPlatform` or falls back to `platform` string)
- A `Select` dropdown for choosing the platform
- An `Input` for the profile URL
- A delete button (`Trash2`) to remove the entry

Supported icon keys in `iconMap`: `linkedin`, `github`, `twitter`, `reddit`, `slack`, `whatsapp`, `website`, `youtube`, `instagram`, `facebook`, `discord`, `telegram`, `tiktok`.

## Usage Example

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

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

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

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

> **Note:** `platforms` defaults to an empty array, so platform data should always be passed explicitly — typically fetched from your database to keep icon and URL patterns in sync.