Overview
TimelineCard displays a single event in a timeline view, featuring an icon circle on the timeline spine, title, description, tags, and optional admin actions. It supports two density modes and expandable content.
Key Features
- Two density modes: default (full detail) and compact (single line)
- Timeline icon on vertical spine with connecting lines
- Tags with customizable badge variants
- Admin action menu (edit, duplicate, delete)
- Expandable content sections
- Automatic link wrapping for clickable cards
Examples
Density Modes
Default density shows full details (title, description, tags). Compact shows a single-line summary.
Default Density
Alpha Project Launched
Initial project setup completed with all core features enabled.
Compact Density
With Tags
Tags display key metadata. Each tag has a label and optional variant (success, destructive, secondary, outline).
First 100 Users
Milestone reached with active user engagement.
Admin Actions
When showAdminActions is enabled, a dropdown menu appears with edit, duplicate, and delete options.
Alpha Project Launched
Initial project setup completed with all core features enabled.
Expandable Content
Use renderExpandedContent to show additional details in a collapsible section.
Dark Mode Released
New dark mode feature available to all users.
Custom Content
Use renderContent to add custom content below the standard card layout.
Alpha Project Launched
Initial project setup completed with all core features enabled.
Clickable Card
Cards with a link property become clickable and wrap in a navigation link.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
item | TimelineItem | required | Timeline item data (id, type, title, description, date, tags, link) |
eventType | TimelineEventType | required | Event type configuration with icon and color |
density | "default" | "compact" | "default" | Display mode: 'default' (full) or 'compact' (single line) |
isFirst | boolean | false | Whether this is the first card (hides top line) |
isLast | boolean | false | Whether this is the last card (hides bottom line) |
showAdminActions | boolean | false | Show admin action dropdown menu |
onEventClick | (item: T) => void | - | Callback when card is clicked |
onAdminAction | (item: T, action: string) => void | - | Callback when admin action selected (action: 'edit' | 'duplicate' | 'delete') |
renderContent | (item: T) => ReactNode | - | Custom render function for additional content |
renderExpandedContent | (item: T) => ReactNode | - | Custom render function for expandable section |
Usage Patterns
import { TimelineCard, type TimelineItem, type TimelineEventType } from '@/ui/blocks/timeline-block';
// Define event type with icon and color
const eventType: TimelineEventType = {
key: 'project-created',
label: 'Project Created',
icon: faFolderOpen,
color: 'text-blue-400',
};
// Timeline item data
const item: TimelineItem = {
id: '1',
type: 'project-created',
title: 'Alpha Project Launched',
description: 'Initial project setup completed',
date: new Date(),
tags: [
{ label: 'Beta Test', variant: 'success' },
{ label: 'Mobile', variant: 'secondary' },
],
link: '/projects/alpha',
};
// Default density with all features
<TimelineCard
item={item}
eventType={eventType}
density="default"
isFirst={true}
isLast={false}
showAdminActions={true}
onEventClick={(item) => console.log('Clicked:', item)}
onAdminAction={(item, action) => console.log(action, item)}
/>
// Compact density for dense lists
<TimelineCard
item={item}
eventType={eventType}
density="compact"
isFirst={false}
isLast={true}
showAdminActions={false}
/>