A pure-presentation React component that renders a compact, reusable entity/document card for chat interfaces, supporting optional links, status badges, key-value facts, and a loading skeleton state. ## Key Components ### `GenericEntityCard` Main card component. Renders as an `` (with `anchorProps` or derived `href`) or a static `` when no URL is available. Displays title, optional badge, subtitle, preview text, fact rows, and a formatted date. ### `GenericEntityCardSkeleton` Shimmer/placeholder version of the card for loading states, matching the layout of the full card. ### Interfaces | Interface | Purpose | |---|---| | `GenericEntityCardItem` | Data shape for the card content | | `GenericEntityCardAnchorProps` | Pre-composed anchor element props (href, target, rel, onClick) | | `GenericEntityCardProps` | Combined props for `GenericEntityCard` | ### `GenericEntityCardItem` Fields | Field | Type | Description | |---|---|---| | `id` | `string` | Unique identifier | | `title` | `string` | Primary heading | | `preview` | `string \| null` | 2-line clamped body text | | `url` | `string \| null` | Link target (sanitized via `safeHref`) | | `subtitle` | `string \| null` | Monospace secondary line | | `badge` | `{ text, scheme? } \| null` | Status badge with color scheme | | `facts` | `Array<{ label, value }>` | Inline key-value pairs | | `dateUpdated` | `string \| number \| null` | Formatted as local UTC date | ## Usage Example ```typescript import { GenericEntityCard, GenericEntityCardSkeleton } from './generic-entity-card' // With external link controlled by parent // Loading state ``` ## Source [`generic-entity-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/generic-entity-card.tsx)