<a id="timeline"></a>

## Timeline  
**Category**: Data Display
Timeline visualization component
### Examples

#### Basic Timeline  
```python
events = [   
    ("1984", "First Macintosh computer"),  
    ("1998", "iMac"),  
    ("2001", "iPod"),  
    ("2007", "iPhone"),  
    ("2015", "Apple Watch")  
] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),  # Only add Hr before if not first item
        Div(year, cls='timeline-start'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])  # Only add Hr after if not last item
    ) for i, (year, event) in enumerate(events)],
    cls='timeline'
)
```

#### Responsive Timeline  
```python
events = [("1984", "First Macintosh computer"), ("1998", "iMac"), ("2001", "iPod"),  
          ("2007", "iPhone"), ("2015", "Apple Watch") ] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(year, cls='timeline-start'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, (year, event) in enumerate(events)],
    cls='timeline timeline-vertical lg:timeline-horizontal'
)
```

#### Colored Line Timeline  
```python
events = [("First Macintosh computer", True), ("iMac", True), ("iPod", True), ("iPhone", False), ("Apple Watch", False) ] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr(cls='bg-primary' if events[i-1][1] else '')]),
        *(([Div(event, cls='timeline-start timeline-box'), 
            Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}'), 
            Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr(cls='bg-primary' if is_primary else '')])
    ) for i, (event, is_primary) in enumerate(events)],
    cls='timeline'
)
```

#### Text-only Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls=f'timeline-{"start" if i % 2 == 0 else "end"} timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Vertical Bottom  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Bottom Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Styled Detailed Timeline  
```python
events = [   
        ("1984", "First Macintosh computer", "The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function..."),  
        ("1998", "iMac", "iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998..."), 
        ("2001", "iPod", "The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001..."), 
        ("2007", "iPhone", "iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs..."), 
        ("2015", "Apple Watch", "The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness tracking, health-oriented capabilities, and wireless telecommunication...") 
    ] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(
            Time(year, cls='font-mono italic'),
            Div(title, cls='text-lg font-black'),
            description,
            cls=f'timeline-{"start" if i % 2 == 0 else "end"} mb-10 {"md:text-end" if i % 2 == 0 else ""}'
        ),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, (year, title, description) in enumerate(events)],
    cls='timeline timeline-snap-icon max-md:timeline-compact timeline-vertical'
)
```

#### Vertical Top  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls='timeline-start timeline-box'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Top Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls='timeline-start timeline-box'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Vertical Alternating  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

 Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        *(([Div(event, cls='timeline-start timeline-box'), Div(Icon.circled_check(), cls='timeline-middle')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls='timeline-middle'), Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Alternating Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        *(([Div(event, cls='timeline-start timeline-box'), Div(Icon.circled_check(), cls='timeline-middle')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls='timeline-middle'), Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Vertical Colored  
```python
events = [("First Macintosh computer", True), ("iMac", True), 
          ("iPod", True), ("iPhone", False), 
          ("Apple Watch", False) ] 

 Ul(
    *[Li(
        *([] if i == 0 else [Hr(cls='bg-primary' if events[i-1][1] else '')]),
        *(([Div(event, cls='timeline-start timeline-box'), 
            Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}'), 
            Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr(cls='bg-primary' if is_primary else '')])
    ) for i, (event, is_primary) in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Vertical Text Only  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls=f'timeline-{"start" if i % 2 == 0 else "end"} timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```