From 677db5760e8c3f8a1c77dd92c78ed0cbf1d0a50e Mon Sep 17 00:00:00 2001
From: stampaaaron <aaron@stampa.ch>
Date: Wed, 11 Jan 2023 14:54:41 +0000
Subject: [PATCH] feat: introduce styled timeline center line

---
 src/components/Timeline.css     | 14 ++++++++++++++
 src/components/Timeline.tsx     | 10 +++++++++-
 src/components/TimelineItem.tsx |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Timeline.css

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
new file mode 100644
index 0000000..8240114
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 2f42300..fc746f0 100644
--- a/src/components/Timeline.tsx
+++ b/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>
+  );
 }
diff --git a/src/components/TimelineItem.tsx b/src/components/TimelineItem.tsx
index 8b400fb..81112c5 100644
--- a/src/components/TimelineItem.tsx
+++ b/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}