Timeline hollow demo

1import Timeline, {
2  TimelineItem,
3  TimelineItemDate,
4  TimelineItemTitle
5} from "@/registry/8starlabs-ui/blocks/timeline";
6 
7const timelineData = [
8  {
9    title: "Project Kickoff",
10    date: new Date("2023-01-01"),
11    variant: "default" as const,
12    hollow: true
13  },
14  {
15    title: "Research Phase",
16    date: new Date("2023-01-15"),
17    variant: "secondary" as const,
18    hollow: true
19  },
20  {
21    title: "Prototype Approval",
22    date: new Date("2023-02-01"),
23    variant: "outline" as const,
24    hollow: true
25  },
26  {
27    title: "Unexpected API Delays",
28    date: new Date("2023-02-10"),
29    variant: "destructive" as const,
30    hollow: true
31  },
32  {
33    title: "Critical Database Failure",
34    date: new Date("2023-02-14"),
35    variant: "destructive" as const,
36    hollow: true
37  },
38  {
39    title: "Beta Launch",
40    date: new Date("2023-03-01"),
41    variant: "default" as const,
42    hollow: true
43  }
44];
45 
46export default function TimelineVerticalDemo() {
47  return (
48    <Timeline orientation="vertical" noCards vertItemSpacing={60}>
49      {timelineData.map((item, idx) => (
50        <TimelineItem key={idx} variant={item.variant} hollow={item.hollow}>
51          <TimelineItemDate>{item.date.toDateString()}</TimelineItemDate>
52          <TimelineItemTitle>{item.title}</TimelineItemTitle>
53        </TimelineItem>
54      ))}
55    </Timeline>
56  );
57}