feat: introduce styled timeline center line

Author: stampaaaron

src/components/Timeline.css

@@ -0,0 +1,14 @@
+.timeline {
+  position: relative;
+}
+
+div.timeline__line {
+  background-color: black;
+  width: 0.5rem;
+  height: 20rem;
+  margin-inline: auto;
+}
+
+.timeline-item {
+  position: absolute;
+}

src/components/Timeline.tsx

@@ -1,9 +1,17 @@
 import { TimelineItem, TimelineItemProps } from './TimelineItem';
+import './Timeline.css';
 
 export type TimelineProps = {
   items: TimelineItemProps[];
 };
 
 export function Timeline({ items }: TimelineProps) {
-  return items.map((item) => <TimelineItem key={item.date.toISOString()} {...item} />);
+  return (
+    <div className="timeline">
+      <div className="timeline__line" />
+      {items.map((item) => (
+        <TimelineItem key={item.date.toISOString()} {...item} />
+      ))}
+    </div>
+  );
 }

src/components/TimelineItem.tsx

@@ -8,7 +8,7 @@ export type TimelineItemProps = PropsWithChildren<{
 
 export function TimelineItem({ className, title, date, children }: TimelineItemProps) {
   return (
-    <div className={className}>
+    <div className={`${className} timeline-item`}>
       <p>{date.toISOString()}</p>
       <p>{title}</p>
       {children}