Renders a visual card for Slack message markers in two layout variants (`compact` and `row`), with a matching skeleton loader for loading states. Pure presentation component — navigation behavior is injected externally via `anchorProps`. ## Key Components | Export | Type | Description | |---|---|---| | `SlackMessageCard` | Component | Main card rendering a `SlackMessageItem` in `compact` (default) or `row` layout | | `SlackMessageCardSkeleton` | Component | Animated placeholder matching the card's layout during data fetching | | `SlackMessageCardProps` | Interface | Props for `SlackMessageCard`: `item`, `variant`, `className`, `anchorProps` | | `SlackMessageCardAnchorProps` | Interface | Anchor prop bundle (`href`, `target`, `rel`, `onClick`) composed by the caller | | `parseChannelFromUrl` | Helper (private) | Extracts the Slack channel ID from a `*.slack.com/archives/` URL | ## Usage Example ```typescript import { SlackMessageCard, SlackMessageCardSkeleton } from './slack-message-card' import type { SlackMessageItem } from '../types/entities/slack-message' const item: SlackMessageItem = { title: 'Deployment alert', preview: 'Production deploy succeeded at 14:32 UTC.', url: 'https://myteam.slack.com/archives/C01AB2CD3EF/p1234567890', channel: null, dateUpdated: '2024-06-01T14:32:00Z', } // Compact card with external navigation // Compact card with caller-controlled navigation (e.g. SPA router) { e.preventDefault(); router.push('/messages/42') }, }} /> // Inline row layout (e.g. inside a list or table) // Loading state ``` **Anchor resolution priority:** `anchorProps` → `item.url` (opens `_blank`) → static `` when no URL is available.