Timeline vertical 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  },
13  {
14    title: "Research Phase",
15    date: new Date("2023-01-15"),
16    variant: "secondary" as const
17  },
18  {
19    title: "Prototype Approval",
20    date: new Date("2023-02-01"),
21    variant: "outline" as const
22  },
23  {
24    title: "Unexpected API Delays",
25    date: new Date("2023-02-10"),
26    variant: "destructive" as const
27  },
28  {
29    title: "Critical Database Failure",
30    date: new Date("2023-02-14"),
31    variant: "destructive" as const
32  },
33  {
34    title: "Beta Launch",
35    date: new Date("2023-03-01"),
36    variant: "default" as const
37  }
38];
39 
40export default function TimelineVerticalDemo() {
41  return (
42    <Timeline orientation="vertical" noCards vertItemSpacing={60}>
43      {timelineData.map((item, idx) => (
44        <TimelineItem key={idx} variant={item.variant}>
45          <TimelineItemDate>{item.date.toDateString()}</TimelineItemDate>
46          <TimelineItemTitle>{item.title}</TimelineItemTitle>
47        </TimelineItem>
48      ))}
49    </Timeline>
50  );
51}