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++ ){
      rows.push(
        <div id={data[i].cssname} className={cla}>
            {data[i].node}
        </div>
      )
    }
    return rows; 
  }
  
import { BlockQuoteB } from "./Quotes";
  import { TimelineDatenpunkt } from "./data/hptimelinedata";
  
  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"); 
      }

      /* 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(" aim of contact 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?" ); 
        }
      }

      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}
                      </div>
                    </div>
                    <div className="col-3">{lang}</div>
                  </div>
                  <div className="row">
                    <div className="col">
                      <BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
                    </div>
                    <div className="col-3">
                      <img className="middle sechpro" src={data[i].pictureurl}/>
                    </div>
                  </div>
                  <h4>Aim of contact</h4>
                  <p>{data[i].aimofcontact}</p>
                  <h4>Insights</h4>
                  <p>{data[i].insights}</p>
                  {clari}
                  <h4>Implementation</h4>
                  <p>{data[i].implementation}</p>
            </>
      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; 
  }