Show event according years

Author: alexbaumgertner

components/TimeHistory/TimeHistory.tsx

@@ -105,7 +105,7 @@ const TimeHistory = ({
                 }px`,
               }}
             >
-              <TimeSpanBar {...item} />
+              <TimeSpanBar {...item} yearWidth={yearWidth} />
             </div>
           ))}
         </div>

components/TimeSpanBar/TimeSpanBar.module.css

@@ -3,17 +3,18 @@
   display: grid;
   font-family: sans-serif;
   grid-template-areas:
-    "start start"
     "header header"
     "events events"
     "end end";
 }
 
 .header {
+  display: flex;
+  flex-direction: row;
   font-size: 16px;
   font-weight: 600;
   grid-area: header;
-  margin: 12px 4px;
+  margin: 0;
 }
 
 .content {
@@ -60,14 +61,17 @@
   gap: 4px;
   align-items: top;
   overflow: scroll;
+  height: 100px;
 }
 
 .event {
   box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  height: 90%;
+  background-color: #fff;
+  height: 100px;
   overflow-y: scroll;
   font-size: 0.5em;
   min-width: 80px;
+  position: absolute;
 }
 
 .eventDate {

components/TimeSpanBar/TimeSpanBar.tsx

@@ -27,6 +27,7 @@ export interface TimeSpanBarProps {
   }[];
   header: string;
   image: string;
+  yearWidth: number;
 }
 
 const formatDate = (date: Date) => {
@@ -43,17 +44,30 @@ const TimeSpanBar = ({
   events,
   header,
   image,
+  yearWidth,
 }: TimeSpanBarProps) => {
+  const duration = end.date.getFullYear() - start.date.getFullYear();
+
   return (
     <div className={classes.component}>
-      <h3 className={classes.header}>{header}</h3>
-      <div className={classes.start}>
-        <div className={classes.label}></div>
-        <div className={classes.date}>{formatDate(start.date)}</div>
-      </div>
-      <div className={classes.events}>
+      <h3 className={classes.header}>
+        <div className={classes.start}>
+          <div className={classes.label}></div>
+          <div className={classes.date}>{formatDate(start.date)}</div>
+        </div>
+        {header}
+      </h3>
+      <div className={classes.events} style={{ width: duration * yearWidth }}>
         {events.map((event, index) => (
-          <div className={classes.event} key={index}>
+          <div
+            className={classes.event}
+            key={index}
+            style={{
+              left:
+                (event.info.date.getFullYear() - start.date.getFullYear()) *
+                yearWidth,
+            }}
+          >
             <div className={classes.eventDate}>
               {formatDate(event.info.date)}
             </div>