Auf Integrated Human Practice Seite -> Zeitstrahl: Zeitmarken/Monate

src/components/HorizontalTimeline.tsx

 import { HPMoreButton } from "./Buttons";
 import { timelinedata } from "../data/hptimelinedata";
-function TimeItem({tag, title, pic, author, tabid}: ItemProps){
+function TimeItem({tag, title, pic, author, tabid, month}: ItemProps){
     let cl = "t-tag " + tag;
     return(
     <li className="timelineolli">
       <div className="timeline-item moretop">
         <div className="">
-            <div className={cl}>
-                {tag}
+        <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
+              <div className={cl}>
+                  {tag}
+              </div>
+              <div className="col">
+                 
+              </div>
+              <div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
+                  {month}
+              </div>
             </div>
             
             <div className="fillup-wrapper">
@@ -38,15 +46,24 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
     )
   }
   
-  function TimeItemMeta({ tag, title, pic, author, tabid}: ItemProps){
+  function TimeItemMeta({ tag, title, pic, author, tabid, month}: ItemProps){
     return(
     <li className="timelineolli">
       <div className="timeline-item time-meta moretop">
         <div className="">
-            <div className=" t-tag colour-meta-tag">
-                {tag}
+            <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
+              <div className="col-6 t-tag colour-meta-tag">
+                  {tag}
+              </div>
+              <div className="col">
+                 
+              </div>
+              <div className="col-6 t-tag" style={{color: "black", backgroundColor: "#e2dad7"}}>
+                  {month}
+              </div>
             </div>
             
+            
            <div className="fillup-wrapper">
             <div className="row align-items-center fillup">
                 <div className="col" >
@@ -113,6 +130,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
         pic: string,
         author: string, 
         tabid: string
+        month: string
         }
     
         
@@ -135,7 +153,7 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
               tag={timelinedata[i].tag}
               author={name}
               tabid={timelinedata[i].interviewtabid}
-              >
+              month={timelinedata[i].months}              >
                 {timelinedata[i].cardtext}
               </TimeItemMeta>)
           }
@@ -152,8 +170,8 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
               pic={timelinedata[i].pictureurl}
               tag={timelinedata[i].tag}
               author={name}
-              tabid={timelinedata[i].interviewtabid}
-              >
+              tabid={timelinedata[i].interviewtabid} 
+              month={timelinedata[i].months}             >
                 {timelinedata[i].cardtext}
               </TimeItem>)
           }
@@ -175,13 +193,13 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 name =  timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
               }
                 rows.push(<TimeItem
-                    key={i}
-                    title={timelinedata[i].heading}
-                    pic={timelinedata[i].pictureurl}
-                    tag={timelinedata[i].tag}
-                    author={name}
-                    tabid={timelinedata[i].interviewtabid}
-                >
+                  key={i}
+                  title={timelinedata[i].heading}
+                  pic={timelinedata[i].pictureurl}
+                  tag={timelinedata[i].tag}
+                  author={name}
+                  tabid={timelinedata[i].interviewtabid} 
+                  month={timelinedata[i].months}  >
                     {timelinedata[i].cardtext}
                 </TimeItem>)
             }