HorizontalTimeline.tsx

import { NewHPMoreButton } from "./Buttons";
import { timelinedata } from "../data/hptimelinedata";
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="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">
            <div className="row align-items-center fillup">
                <div className="col" >
                <img className="img-round" src={pic} />
                </div>
                <div className="col" >
                    {title}
                </div>
              </div>
           </div>
            <div className="row align-items-center hpbuttonrow">
              <div className="col">
                <p style={{marginTop: "10px"}}>{author}</p>
              </div>
              <div className="col-4">
                <div className="tab">
                <NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
                </div>
              </div>
            </div>
            
            
        </div>
      </div>
    </li>
    )
  }
  
  function TimeItemMeta({ tag, title, pic, author, tabid, month}: ItemProps){
    let cl = "t-tag " + tag;
    return(
    <li className="timelineolli">
      <div className="timeline-item time-meta moretop">
        <div className="">
            <div className="row" style={{paddingLeft: "10px", paddingRight: "15px"}}>
              <div className={`${cl} col-6 t-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" >
                <img className="img-cube" src={pic} />
                </div>
                <div className="col" >
                    {title}
                </div>
              </div>
           </div>
            <div className="row align-items-center hpbuttonrow">
              <div className="col">
                <p style={{marginTop: "10px"}}>{author}</p>
              </div>
              <div className="col-4">
                <div className="tab">
                <NewHPMoreButton tab={tabid} scroll={`${tabid}-heading`}/>
                </div>
              </div>
            </div>
            
            
        </div>
      </div>
    </li>
    )
  }
  
  export function CombiTimeHori({tab1, tab2}:{tab1: string, tab2: string}){
    let nod; 

    
      /* console.log("Tab") */
      nod = getItemsByTypes(tab1, tab2);
    
    return(
    <div>
  <section className="timeline">
  <ol className="timelineol">
      {nod}
    <li className="timelineolli"></li>
  </ol>
  
  
  </section>
  </div>
    )
  
  }
 export function getItemsByTypes(tabid1: string, tabid2: string) {
        let rows: JSX.Element[]  = []
        for (let i = 0; i < timelinedata.length; i++) {
            if (tabid1 === timelinedata[i].tag || tabid2 === timelinedata[i].tag) {
              var name: string; 
              if (timelinedata[i].title) {
                name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
              }
              else{
                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} 
                  month={timelinedata[i].months}  >
                </TimeItem>)
            }
        }
        return rows; 
    }
  
  export default function TimeHori({tab}:{tab: string}){
    let nod; 
    /* console.log("TimeHori") */
    if (tab === ""){  
      nod = <AllItems></AllItems>
      /* console.log("Tab = ''") */
    }
    else{
      /* console.log("Tab") */
      nod = getItemsByType(tab);
    }
    return(
    <div>
  <section className="timeline">
  <ol className="timelineol">
      {nod}
    <li className="timelineolli"></li>
  </ol>
  
  
  </section>
  </div>
  
    )
  }
  

  
      
      interface ItemProps {
        title: string ,
        children?: React.ReactNode;
        tag: string, 
        pic: string,
        author: string, 
        tabid: string
        month: string
        }
    
        


      function AllItems(){
        let rows: JSX.Element[]  = []
        for ( let i = 0;  i < timelinedata.length; i++ ){
          if (timelinedata[i].type === "meta"){
            var name: string; 
            if (timelinedata[i].title) {
              name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
            }
            else{
              name =  timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
            }
            rows.push(<TimeItemMeta 
              title={timelinedata[i].heading}
              pic={timelinedata[i].pictureurl}
              tag={timelinedata[i].tag}
              author={name}
              tabid={timelinedata[i].interviewtabid}
              month={timelinedata[i].months}              >
              </TimeItemMeta>)
          }
          else{
            var name: string; 
            if (timelinedata[i].title) {
              name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
            }
            else{
              name =  timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
            }
            rows.push(<TimeItem 
              title={timelinedata[i].heading}
              pic={timelinedata[i].pictureurl}
              tag={timelinedata[i].tag}
              author={name}
              tabid={timelinedata[i].interviewtabid} 
              month={timelinedata[i].months}             >
              </TimeItem>)
          }
          
        }
        return rows; 
      }

      
      export function getItemsByType(tabid: string) {
        let rows: JSX.Element[]  = []
        for (let i = 0; i < timelinedata.length; i++) {
            if (tabid === timelinedata[i].tag) {
              var name: string; 
              if (timelinedata[i].title) {
                name = timelinedata[i].title! + " " + timelinedata[i].vorname + " " +  timelinedata[i].nachnname;
              }
              else{
                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} 
                  month={timelinedata[i].months}  >
                </TimeItem>)
            }
        }
        return rows; 
    }