<!-- source-hash: 585cbb6811e0a4bfee9cb696fd04216d -->
A client-side React card component that displays a brand association item with an icon, title, description, and an external link button.

## Key Components

### Interfaces

- **`BrandAssociationItem`** — Data shape for a card entry, containing:
  - `icon` — Accepts either a React component type or a pre-rendered React element
  - `title`, `description`, `buttonText`, `link` — Display content and navigation target

- **`BrandAssociationCardProps`** — Props for the card component (`item` + optional `className`)

### Exports

- **`BrandAssociationCard`** — The primary card component. Internally uses a `renderIcon` helper that handles both raw React elements and component types (rendering the latter at `size={120}` with `w-20 h-20` classes).

## Usage Example

```typescript
import { BrandAssociationCard } from './brand-association-card';
import { ShieldCheck } from 'lucide-react';

const item = {
  icon: ShieldCheck,               // component type
  title: 'Security Tools',
  description: 'Browse our curated security integrations.',
  buttonText: 'Integrations',
  link: 'https://openframe.ai/integrations',
};

<BrandAssociationCard item={item} className="rounded-lg" />

// Pre-rendered element also accepted:
const item2 = {
  icon: <ShieldCheck size={80} color="#FF5A1F" />,  // React element
  // ...
};
```

## Notes

- Uses `'use client'` — intended for Next.js App Router client components.
- The `Button` component's `openInNewTab` prop and `ExternalLink` icon are applied automatically.
- Source: [`brand-association-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/brand-association-card.tsx)