moll.re/frontend/src/components/timeline.tsx

import * as elements from "typed-html";
import { TimelineCard } from "./timeline_card";
import { TimelineItem } from "../structs/timeline_item";

const Timeline = ({ timeline_items }: {timeline_items: TimelineItem[]}) => {
    return (
        <div class={'container md:p-3'}>
            <div class="flex flex-col items-center justify-center">
                <div class="text-6xl font-bold text-black">Timeline</div>
                <div class="text-2xl text-black">A little about us</div>
                <ol class="relative border-s border-gray-200 dark:border-gray-700">
                    {timeline_items.map((item, index) => (
                        // <div class={`card ${index % 2 === 0 ? 'left' : 'right'}`}>
                        <li class={`mb-10 ms-6 p-4 rounded-lg shadow-md ${index % 2 === 0 ? 'bg-white' : 'bg-gray-200'}`}>
                            <TimelineCard {...item}/>
                        </li>
                    ))}
                </ol>
            </div>
        </div>
    );
};

export { Timeline }