<!-- source-hash: 5014a5d76cff7f765951023b41048390 -->
Reusable admin content card component that renders a cover image with edge-color fill, title, subtitle, summary, platform badges, meta info, and action buttons in a consistent card layout.

## Key Components

### `AdminContentCard`
Main exported component. Renders an `<article>` card with a 3:2 aspect-ratio cover image and a flexible content body.

### `AdminContentCardProps`
| Prop | Type | Description |
|------|------|-------------|
| `imageUrl` | `string \| null` | Primary cover image URL |
| `placeholderUrl` | `string \| null` | Fallback image URL when `imageUrl` is missing or errors |
| `title` | `string` | Required heading and image alt text |
| `summary` | `string \| null` | Two-line clamped description |
| `subtitle` | `string \| null` | Secondary line (e.g. customer name) |
| `platforms` | `PlatformInfo[]` | Renders `<PlatformBadge>` chips |
| `badges` | `ReactNode` | Additional status badges after platform chips |
| `meta` | `ReactNode` | Date, views, or other metadata row |
| `actions` | `ReactNode` | Pinned-to-bottom action buttons |
| `className` | `string` | Extra Tailwind classes |

### Internal Hooks
- **`useImageEdgeColor`** — samples the edge color of `displayUrl` to use as the image container background, blending the cover image seamlessly.
- **`useState / useEffect`** — tracks `imageError` and `imageLoaded` states; resets load state on URL change to replay the fade-in.

## Usage Example

```typescript
import { AdminContentCard } from './admin-content-card'

<AdminContentCard
  imageUrl="https://cdn.example.com/cover.png"
  placeholderUrl="https://cdn.example.com/og-placeholder.png"
  title="Quarterly Security Report"
  subtitle="Acme Corp"
  summary="Overview of vulnerabilities patched in Q2 2025."
  platforms={[{ id: 'azure', name: 'Azure', display_name: 'Microsoft Azure' }]}
  badges={<span className="badge">Published</span>}
  meta={<span>June 12, 2025 · 142 views</span>}
  actions={<button>Edit</button>}
/>
```