feat(Timeline): Timeline component showing current entry. Might change.

2026-09-06 23:33:30 +02:00 · 2026-08-06 22:19:04 +02:00
parent 4a190627cb
commit 030ca4009c
1 changed files with 59 additions and 0 deletions
@@ -0,0 +1,59 @@
 import type { ReactElement } from "react";
 interface TimelineEntryProps {
    title: string;
    subtitle: string;
    subtitleUrl?: string;
    date: string;
    current?: boolean;
    highlights: string[];
 }
 export default function TimelineEntry({
    title,
    subtitle,
    subtitleUrl,
    date,
    current,
    highlights,
 }: TimelineEntryProps): ReactElement {
    return (
        <div className="relative pl-6 pb-8 border-l-2 border-ctp-overlay0">
            <span className="absolute -left-1.25 top-1 size-2 rounded-full bg-ctp-green" />
            <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
                <h3 className="text-lg font-semibold text-ctp-text">
                    {title}
                    {current && (
                        <span className="ml-2 text-xs font-normal text-ctp-green border border-ctp-green rounded-full px-2 py-0.5 align-middle">
                            Current
                        </span>
                    )}
                </h3>
                <span className="text-sm text-ctp-subtext0">{date}</span>
            </div>
            <p className="text-ctp-mauve">
                {subtitleUrl ? (
                    <a
                        href={subtitleUrl}
                        target="_blank"
                        rel="noreferrer"
                        className="hover:underline"
                    >
                        {subtitle}
                    </a>
                ) : (
                    subtitle
                )}
            </p>
            {highlights.length > 0 && (
                <ul className="list-disc pl-6 mt-2 space-y-1 text-ctp-text">
                    {highlights.map((h) => (
                        <li key={h} className="text-sm">
                            {h}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
 }