feat: introduce timeline markers

Author: stampaaaron

src/components/Timeline.css

@@ -1,17 +1,22 @@
 .timeline {
+  --timeline-line-width: 0.2rem;
+  --marker-line-width: var(--timeline-line-width);
+  --marker-size: 1.5rem;
+
   position: relative;
 }
 
 div.timeline__line {
   background-color: black;
-  width: 0.5rem;
+  width: var(--timeline-line-width);
   height: 100%;
   margin-inline: auto;
 }
 
 .timeline-item {
   position: absolute;
-  width: 45%;
+  width: 50%;
+  display: flex;
 }
 
 .timeline-item--left {
@@ -21,3 +26,39 @@ div.timeline__line {
 .timeline-item--right {
   right: 0;
 }
+
+.timeline-item__content {
+  border: 1px solid black;
+  padding: 1rem;
+  flex: 1;
+}
+
+div.timeline-item__marker {
+  position: relative;
+  height: var(--marker-line-width);
+  margin-top: 2rem;
+  width: 5rem;
+  background-color: black;
+}
+
+.timeline-item__marker::after {
+  content: '';
+  border-radius: 50%;
+  width: var(--marker-size);
+  height: var(--marker-size);
+  background-color: black;
+  position: absolute;
+  top: calc(-1 * var(--marker-size) / 2 + var(--marker-line-width) / 2);
+}
+
+.timeline-item--left .timeline-item__marker::after {
+  right: calc(-1 * var(--marker-size) / 2);
+}
+
+.timeline-item--right .timeline-item__marker::after {
+  left: calc(-1 * var(--marker-size) / 2);
+}
+
+.timeline-item--left .timeline-item__marker {
+  order: 1;
+}

src/components/Timeline.tsx

@@ -14,8 +14,8 @@ export type TimelineProps = {
 };
 
 const defaultTimelineConfig: Partial<TimelineProps> = {
-  gap: 30,
-  offset: 30,
+  gap: 50,
+  offset: 50,
 };
 
 export function Timeline(props: TimelineProps) {

src/components/TimelineItem.tsx

@@ -9,9 +9,12 @@ export type TimelineItemProps = PropsWithChildren<{
 export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(({ className, title, date, children }, ref) => {
   return (
     <div ref={ref} className={`${className} timeline-item`}>
-      <p>{date.toISOString()}</p>
-      <p>{title}</p>
-      {children}
+      <div className="timeline-item__marker" />
+      <div className="timeline-item__content">
+        <p>{date.toISOString()}</p>
+        <p>{title}</p>
+        {children}
+      </div>
     </div>
   );
 });