Timeline not alternating demo

1import Timeline, {
2  TimelineItem,
3  TimelineItemTitle
4} from "@/registry/8starlabs-ui/blocks/timeline";
5 
6const timelineData = [
7  {
8    title: "Project Kickoff",
9    variant: "default" as const
10  },
11  {
12    title: "Research Phase",
13    variant: "secondary" as const
14  },
15  {
16    title: "Prototype Approval",
17    variant: "default" as const
18  },
19  {
20    title: "Unexpected API Delays",
21    variant: "secondary" as const
22  },
23  {
24    title: "Critical Database Failure",
25    variant: "default" as const
26  },
27  {
28    title: "Beta Launch",
29    variant: "secondary" as const
30  }
31];
32 
33export default function TimelineNoCardsDemo() {
34  return (
35    <Timeline
36      orientation="horizontal"
37      alternating={false}
38      alignment="bottom/right"
39      horizItemSpacing={180}
40      horizItemWidth={150}
41    >
42      {timelineData.map((item, idx) => (
43        <TimelineItem key={idx} variant={item.variant} className="text-center">
44          <TimelineItemTitle>{item.title}</TimelineItemTitle>
45        </TimelineItem>
46      ))}
47    </Timeline>
48  );
49}