Tabs.tsx

// The main tab has to be given display: block; via id css or be given the id "First"
export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
    let rows = []
    for ( let i = 0;  i < data.length; i++ ){
      if(data[i].main == true){
        rows.push(<div id={data[i].cssname} className={cla} style={{display: "block"}}>
          {data[i].node}
        </div>)
      }
      else{
        rows.push(<div id={data[i].cssname} className={cla} style={{display: "none"}}>
          {data[i].node}
        </div>)
      }
    }
    return rows; 
  }
  
import React from "react";
import { BlockQuoteB } from "./Quotes";
import { TimelineDatenpunkt } from "../data/hptimelinedata";
import Collapsible from "./Collapsible";

/* import { stringToSlug } from "../utils"; */
  
  export function BFHStyleTabs({data, cla}: {data: Array<TimelineDatenpunkt>, cla: string}) {
    let rows = []
    for ( let i = 0;  i < data.length; i++ ){
      var problem: Boolean = false; 
      var problem_desc: Array<string> = [];
      /* Language */
      var lang; 
      if(data[i].language === "en"){
        lang = "Original language: English"
      }
      else if(data[i].language === "de"){
        lang = "Original language: German"
      }
      else if(data[i].type != "meta"){
        problem = true;
        problem_desc.push("interview language"); 
      }
      
      /* Expert on  */
      let expert = ""; 
      if (data[i].experton) {
        expert = `Expert on ${data[i].experton}`; 
      }

      /* Aim/Goal */
      var goalheading: string = ""; 
      if(data[i].type === "meta"){
        goalheading = "Goals"; 
      }
      else{
        goalheading = "Aim of contact"
      }

      /* Quotation */
      var quoted: string = ""; 
      if(data[i].quote != ""){
        if(data[i].quoteNachname && data[i].quoteVorname){
          quoted = data[i].quoteVorname + " " + data[i].quoteNachname;
        }
        else{
          quoted = data[i].vorname + " " + data[i].nachnname; 
        }
      }
      else{
        problem = true;
        problem_desc.push("quote missing"); 
      }

      /* textparts */
      if(data[i].aimofcontact === ""){
        problem = true;
        problem_desc.push(" " + goalheading + " missing"); 
      }
      if(data[i].insights === ""){
        problem = true;
        problem_desc.push(" insights missing"); 
      }
      if(data[i].implementation === ""){
        problem = true;
        problem_desc.push(" implementation missing"); 
      }
      /* Clarification */
      var clari: React.ReactNode = <></>
      if(data[i].clarification){
        clari = <>
                  <h4>Clarification</h4>
                  <p>{data[i].clarification}</p>
                </>
      }
      /* Other warnings */
      if(data[i].interviewtabid === ""){
        problem = true;
        problem_desc.push(" interviewtabid missing"); 
      }
     /*  if(data[i].cardtext === ""){
        problem = true;
        problem_desc.push(" cardtext missing"); 
      } */
      if(data[i].type !== "meta"){
        if(data[i].affiliation === undefined || data[i].affiliation === ""){
          problem = true;
          problem_desc.push(" affiliation missing"); 
        }
        if(data[i].job === undefined || data[i].job === ""){
          problem = true;
          problem_desc.push(" job missing" ); 
        }
      }
      if(data[i].type === "meta"){
        if(data[i].quoteVorname === undefined || data[i].quoteVorname === ""){
          problem = true;
          problem_desc.push(" who is the quote from?" ); 
        }
      }

      /* References */
      var refs: React.ReactNode = <></>;
      if (data[i].references) {
        refs = <> <h4>References </h4> {data[i].references}</> 
      }
      
      /* Further pictures */
      var inv_img: React.ReactNode = <></>;
      if (data[i].pictureurl_interview) {
        inv_img =  <>  <div className="hti-box"> <img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
                    
      }
      var imp_img: React.ReactNode = <></>;
      if (data[i].pictureurl_implementation) {
        imp_img =   <> <div className="hti-abstand"/><div className="hti-box">
                        <img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
                      </div>
                    </>
      }
      var aim_img: React.ReactNode = <></>;
      if (data[i].pictureurl_aim) {
        aim_img =  <> <div className="hti-abstand"/> <div className="hti-box">
        <img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/> 
   </div></>
      }
      let int = <></>; 
      if (data[i].interview) {
          int = <Collapsible title="Interview" id="joshuainv">
            {data[i].interview}
          </Collapsible>
      }
    

      let node = <>
                <br/>
                  <h3>{data[i].vorname} {data[i].nachnname}</h3>
                  <hr/>
                  <div className="row">
                    <div className="col-6">
                      <div className={"t-tag " + data[i].tag}>
                          {data[i].job} {data[i].affiliation}
                      </div>
                    </div>
                    <div className="col" style={{padding: "5px"}}>{expert}</div>
                    <div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
                  </div>
                  <div className="row">
                    <div className="col">
                    <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
                    <p>{data[i].summary}</p>
                    </div>
                    <div className="col-3">
                      <img className="middle sechpro" src={data[i].pictureurl}/>
                    </div>
                  </div>
                  
                  <h4>{goalheading}</h4>
                  <div className="flexbox">
                      <p className="hp-timeline-p">{data[i].aimofcontact}</p>
                     
                    {aim_img}
                  </div>

                  
                  <h4>Insights</h4>
                  <div className="flexbox">
                    {inv_img}
                    
                      <p className="hp-timeline-p">{data[i].insights}</p>
                  </div>

                  {clari}

                  <h4>Implementation</h4>
                  <div className="flexbox">
                      <p className="hp-timeline-p">{data[i].implementation}</p>
                     
                    {imp_img}
                  </div>
                  <div className="col">
                      <BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
                  </div>
                  {int}
                  {refs}
            </>
      if(problem){
        rows.push(
          <div id={data[i].interviewtabid} className={cla} style={{ backgroundColor: "black", color: "white"}}>
              <h1>PROBLEM with {data[i].vorname} {data[i].nachnname}</h1>
              <p> because of: </p>
             {problem_desc}
          </div>
        )
      }
      else{
        if (data[i].interviewtabid === "timeline"){
          rows.push(
            <div id={data[i].interviewtabid} className={cla} style={{display: "block"}}>
                {node}
            </div>
          )
        }
        else{
        rows.push(
          <div id={data[i].interviewtabid} className={cla}>
              {node}
          </div>
        )
        }
      }
      
    }
    return rows; 
  }

  /* Interview */
 
  export function OLDBFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
    let rows = []
    for ( let i = 0;  i < data.length; i++ ){
      if (data[i].cssname == "timeline"){
        rows.push(
          <div id={data[i].cssname} className={cla} style={{display: "block"}}>
              {data[i].node}
          </div>
        )
      }
      else{
      rows.push(
        <div id={data[i].cssname} className={cla}>
            {data[i].node}
        </div>
      )
      }
    }
    return rows; 
  }