Timeline Demo

1'use client';
2 
3import {
4  Timeline,
5  type Direction,
6} from '@/components/azemmur/components/azemmur/timeline';
7import type { TimelineVariantProps } from '@/components/azemmur/components/azemmur/timeline/timeline-variants';
8 
9interface TimelineDemoProps extends TimelineVariantProps {
10  direction?: Direction;
11}
12 
13export default function TimelineDemo({
14  orientation = 'horizontal',
15  intent = 'primary',
16  size = 'md',
17  gradient = 'purple-blue',
18  visuals = 'none',
19  shape = 'circle',
20  direction = 'ltr',
21}: TimelineDemoProps) {
22  const isVertical = orientation === 'vertical';
23 
24  return (
25    <div className={isVertical ? 'w-full h-[500px]' : 'w-[400px] h-[400px]'}>
26      <Timeline
27        orientation={orientation}
28        intent={intent}
29        size={size}
30        gradient={gradient}
31        visuals={visuals}
32        shape={shape}
33        direction={direction}
34        className="h-full"
35      >
36        <Timeline.Header>
37          <div className="w-full h-full flex items-center justify-center">
38            <h2
39              className={
40                isVertical ? 'text-2xl font-bold' : 'text-4xl font-bold'
41              }
42            >
43              My Journey
44            </h2>
45          </div>
46        </Timeline.Header>
47 
48        <Timeline.Item title="2020">
49          <div className="flex flex-col gap-4 h-full justify-center">
50            <h4 className="text-xl font-semibold">Started Learning</h4>
51            <p className="max-w-md">
52              Began the journey into web development, learning HTML, CSS, and
53              JavaScript fundamentals.
54            </p>
55          </div>
56        </Timeline.Item>
57 
58        <Timeline.Item title="2021">
59          <div className="flex flex-col gap-4 h-full justify-center">
60            <h4 className="text-xl font-semibold">First Projects</h4>
61            <p className="max-w-md">
62              Built first real-world projects using React and Node.js, exploring
63              modern frameworks.
64            </p>
65          </div>
66        </Timeline.Item>
67 
68        <Timeline.Item title="2022">
69          <div className="flex flex-col gap-4 h-full justify-center">
70            <h4 className="text-xl font-semibold">Professional Growth</h4>
71            <p className="max-w-md">
72              Joined a development team and started working on production
73              applications with TypeScript.
74            </p>
75          </div>
76        </Timeline.Item>
77 
78        <Timeline.Item title="2023">
79// … truncated