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

2026-09-03 14:33:29 +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>
+    );
+}