HorizontalTimeline.tsx

import { HPMoreButton } from "./Buttons";
import { timelinedata } from "../data/hptimelinedata";
function TimeItem({tag, title, pic, author, tabid}: ItemProps){
    let cl = "t-tag " + tag;
    return(
    <li className="timelineolli">
      <div className="timeline-item moretop">
        <div className="">
            <div className={cl}>
                {tag}
            </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">
                <HPMoreButton name={tabid}/>
                </div>
              </div>
            </div>
            
            
        </div>
      </div>
    </li>
    )
  }
  
  function TimeItemMeta({ tag, title, pic, author, tabid}: ItemProps){
    return(
    <li className="timelineolli">
      <div className="timeline-item time-meta moretop">
        <div className="">
            <div className=" t-tag colour-meta-tag">
                {tag}
            </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">
                <HPMoreButton name={tabid}/>
                </div>
              </div>
            </div>
            
            
        </div>
      </div>
    </li>
    )
  }
  
 
  
  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
        }
    
        


      function AllItems(){
        let rows = []
        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}
              >
                {timelinedata[i].cardtext}
              </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}
              >
                {timelinedata[i].cardtext}
              </TimeItem>)
          }
          
        }
        return rows; 
      }

      
      export function getItemsByType(tabid: string) {
        let rows = []
        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}
                >
                    {timelinedata[i].cardtext}
                </TimeItem>)
            }
        }
        return rows; 
    }