HorizontalTimeline.tsx

function TimeItem({tag, title, children, 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="row align-items-center">
              <div className="col" >
              <span className="tl-butt" onClick={Open({person: author})}> <img className="img-round" src={pic} /></span>
              </div>
              <div className="col" >
                  {title}
              </div>
            </div>
            
            <p>{children}</p>
            <div className="tab">
              <button className="tablinks" onClick={openCity({cityName: tabid})}>More</button>
            </div>
        </div>
      </div>
    </li>
    )
  }
  
  
  
  
  export function AllPopus(){
    let rows = []
    for ( let i = 0;  i < data.length; i++ ){
      rows.push(<Popup person={data[i].author}>
        Hi
      </Popup>)
    }
    return rows; 
  }
  
  export function TimeHori(){
  
    return(
    <div>
  <section className="timeline row align-items-center">
  <ol className="timelineol">
    <AllItems></AllItems>
    <li className="timelineolli"></li>
  </ol>
  
  
  </section>
  </div>
  
    )
  }
  
  function Open({person}:{person: string}){
    const openPop =  (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      var popup = document.getElementById(person);
      popup!.classList.toggle("show");
    }
    return openPop; 
    }
  
  interface PopProps {
    person: string, 
    children: React.ReactNode
    }
    
  
  function Popup({person, children}: PopProps){
    return(
      <div id="myPopup" className="popup">
        <span className="popuptext" id={person}>
          <div>
          {children}
          </div>
          <button onClick={Open({person})} >Close</button>
        </span>
        
      </div>
    )
    }
  
  
    function openCity({cityName}:{cityName: string}) {
        const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
          var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          (tabcontent[i] as HTMLElement).style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName)!.style.display = "block";
        event.currentTarget.className += " active";
        }
        return opencity; 
      }
      
      interface ItemProps {
        title: string ,
        children: React.ReactNode;
        tag: string, 
        pic: string,
        author: string, 
        tabid: string
        }
    
        


      function AllItems(){
        let rows = []
        for ( let i = 0;  i < data.length; i++ ){
          rows.push(<TimeItem 
            title={data[i].title}
            pic={data[i].pic}
            tag={data[i].tag}
            author={data[i].author}
            tabid={data[i].tabid}
            >
              {data[i].text}
            </TimeItem>)
        }
        return rows; 
      }
      
      export function getTypeItems(ta: string){
        let rows = []
        for ( let i = 0;  i < data.length; i++ ){
          if (ta = data[i].tag)
          rows.push(<TimeItem 
            title={data[i].title}
            pic={data[i].pic}
            tag={data[i].tag}
            author={data[i].author}
            tabid={data[i].tabid}
            >
              {data[i].text}
            </TimeItem>)
        }
        return rows; 
      }
      
      
      let data = [
        {
        title: "Deutlich längerer Titel zum Test",
        pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
        tag: "Patient",
        author: "author",
        tabid: "Max", 
        text: "Text",
        },
        {
          title: "Deutlich längerer Titel zum Test",
          pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
          tag: "Academia",
          author: "author",
          tabid: "Weber", 
          text: "Text",
          },
        {
        title: "Deutlich längerer Titel zum Test" ,
        pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
        tag:  "Medical Professional",
        author: "a",
        tabid: "Physio",
        text: "Text",
        }
      ]