Timeline

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)

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'
)