Pure presentation component for roadmap feature items, supporting two layout densities: a rich `default` card (with vote buttons, Figma links, and screenshot gallery) and a compact `sm` card for inline chat display. ## Key Components ### `RoadmapCard` Main export. Renders either the full roadmap page card or a compact horizontal card based on the `size` prop. | Prop | Type | Description | |------|------|-------------| | `item` | `RoadmapItem` | Roadmap item data (title, status, description, votes, etc.) | | `size` | `'default' \| 'sm'` | Layout density | | `href` | `string` | Navigation URL (compact branch only) | | `target` | `'_blank'` | Opens in new tab when set | | `userVote` | `VoteType` | Current user's vote (`'up'`, `'down'`, or `null`) | | `onVote` | `(type) => void` | Vote handler (default size only) | | `isVoting` | `boolean` | Disables vote buttons during pending request | | `id` | `string` | DOM id for `useScrollToHash` deep-linking (e.g. `roadmap-`) | ### `RoadmapCardSkeleton` Loading placeholder that mirrors the layout of either size variant using animated pulse placeholders. ### `VoteType` ```typescript export type VoteType = 'up' | 'down' | null ``` ## Usage Example ```typescript // Default rich card (roadmap page) handleVote(item.id, type)} isVoting={votingInFlight} /> // Compact card (chat inline, wrapped by parent anchor) // Skeleton while loading ``` > **Icon fallback order (compact branch):** `TaskTypeIcon` (internal tasks) → proxied logo image → 2-letter title abbreviation.