A reusable card component for displaying admin content items (articles, posts, resources) with a cover image, metadata, platform badges, and action slots. ## Key Components ### `AdminContentCard` The primary exported component rendering a styled card with hover animations and dynamic image handling. ### `AdminContentCardProps` | Prop | Type | Description | |------|------|-------------| | `imageUrl` | `string \| null` | Primary cover image URL | | `placeholderUrl` | `string \| null` | Fallback image URL when `imageUrl` is absent or fails | | `title` | `string` | Card heading and image alt text | | `summary` | `string \| null` | Optional description (2-line clamp) | | `subtitle` | `string \| null` | Secondary line (e.g. customer name) | | `platforms` | `PlatformInfo[]` | Renders `PlatformBadge` entries | | `badges` | `ReactNode` | Additional status/info badges | | `meta` | `ReactNode` | Date, view count, or other metadata | | `actions` | `ReactNode` | Action buttons pinned to the card footer | | `className` | `string` | Additional CSS classes | **Image handling:** - Falls back from `imageUrl` → `placeholderUrl` → plain background on error - Shows a pulse skeleton while the image loads - Applies `useImageEdgeColor` to fill the 3:2 image container background with the image's edge color ## Usage Example ```typescript import { AdminContentCard } from './admin-content-card' Featured} meta={Apr 2025 · 1.2k views} actions={Edit} /> ``` ## Notes - Uses ODS (OpenFrame Design System) tokens (`ods-border`, `ods-accent`, etc.) for theming - Image scaling on hover via `group-hover:scale-[1.03]` requires the parent to carry Tailwind's `group` class (applied internally on `

`) - View source: [`admin-content-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/admin-content-card.tsx)