Timeline demo

1import Timeline, {
2  TimelineItem,
3  TimelineItemDate,
4  TimelineItemTitle,
5  TimelineItemDescription
6} from "@/registry/8starlabs-ui/blocks/timeline";
7 
8const timelineData = [
9  {
10    title: "Project Kickoff",
11    description:
12      "Initial meeting with stakeholders to define the roadmap and core requirements.",
13    date: new Date("2023-01-01"),
14    variant: "default" as const
15  },
16  {
17    title: "Research Phase",
18    description:
19      "Conducted user interviews and competitive analysis to refine the feature set.",
20    date: new Date("2023-01-15"),
21    variant: "secondary" as const
22  },
23  {
24    title: "Prototype Approval",
25    description:
26      "Client signed off on the high-fidelity designs and interactive prototype.",
27    date: new Date("2023-02-01"),
28    variant: "default" as const
29  },
30  {
31    title: "Unexpected API Delays",
32    description:
33      "Third-party integration is taking longer than expected due to rate limiting issues.",
34    date: new Date("2023-02-10"),
35    variant: "outline" as const
36  },
37  {
38    title: "Critical Database Failure",
39    description:
40      "Data corruption occurred during migration. rollback procedures initiated immediately.",
41    date: new Date("2023-02-14"),
42    variant: "destructive" as const
43  },
44  {
45    title: "Beta Launch",
46    description:
47      "System stabilized and released to the first batch of 500 internal users.",
48    date: new Date("2023-03-01"),
49    variant: "default" as const
50  }
51];
52 
53export default function TimelineNoCardsDemo() {
54  return (
55    <Timeline orientation="horizontal">
56      {timelineData.map((item, idx) => (
57        <TimelineItem key={idx} variant={item.variant}>
58          <TimelineItemDate>{item.date.toDateString()}</TimelineItemDate>
59          <TimelineItemTitle>{item.title}</TimelineItemTitle>
60          <TimelineItemDescription>{item.description}</TimelineItemDescription>
61        </TimelineItem>
62      ))}
63    </Timeline>
64  );
65}