Bfh.tsx

import { MyTimeline } from "../components/My-Timeline";
import BFHGallery from "../components/photo-grid";
import BFHpdf from "../components/pdfs";
import { H2} from "../components/headings";
import { BFHStyleTabs } from "../components/Tabs";
let tabbys = [
  {
    node: <BFHpdf></BFHpdf>, 
    cssname: "pdf",
    buttonname: "PDFs"
  },
  {
    node: <MyTimeline></MyTimeline>, 
    cssname: "timeline",
    buttonname: "Timeline"
  },
  {
    node: <BFHGallery/>,
    cssname: "gall",
    buttonname: "Gallery"
  },
  {
    node: <About/>, 
    cssname: "about",
    buttonname: "About"
  }
]
export function Bfh() {
  
  return (
    <>
      <div className="" /* style={{ paddingTop: "5vw"}} */>
        <div className="row align-items-center" >
          <div className="col" style={{position: "relative"}}>
            <div className="explore">
            <b className="fancy">Explore!</b>
            </div>
          </div>
          <div className="col">
            <div className="gall-a">
            <span className="gall-b" typeof="button" onClick={openCity({cityName: "about"})}>
                <div>
                  <img src="https://static.igem.wiki/teams/5247/design/icons/united.png" alt="a house on a mountain"/>
                </div>
              </span>
              <span className="gall-b" typeof="button"  onClick={openCity({cityName: "gall"})}>
                <div>
                  <img src="https://static.igem.wiki/teams/5247/design/icons/gallery.png" alt="a house on a mountain"/>
                </div>
              </span>
              <span className="gall-b" typeof="button" onClick={openCity({cityName: "timeline"})} >
                <div>
                  <img src="https://static.igem.wiki/teams/5247/design/icons/timeline.png" alt="a house on a mountain"/>
                </div>
              </span>
              <span className="gall-b" typeof="button" onClick={openCity({cityName: "pdf"})}>
                <div>
                <img src="https://static.igem.wiki/teams/5247/design/icons/file.png" alt="a house on a mountain"/>
                </div>
              </span>
            </div>
          </div>
          <div className="col">
            
          </div>
        </div>
        <div className="buffer">

        </div>
        <div className="col">
          <BFHStyleTabs data={tabbys} cla="tabcontent"></BFHStyleTabs>
        </div>
      </div>
      <div className="row">
        <div className="d-flex flex-column justify-content-center align-items-center">
        </div>
      </div>
    </>
  );
}



export function About(){
  return(
    <div>
      <H2 text="About Our Cooperation"/>
      <p>Over the past years, we have all made many friends and expanded our scientific network during the iGEM competition and afterwards. The idea behind the cooperation between Bielefeld, Frankfurt and Hamburg is based on the friendship that former participants have gained alongside the iGEM competition. Our mission is to promote future projects and bring teams together. The location of the BFH European Meet-Up 2024 will alternate between the universities of Bielefeld, Frankfurt, and Hamburg. We wish you lots of fun and hope that the iGEM competition fulfills you as much as it has fulfilled us.</p>
      <H2 text="About Networking"/> 
      <p>We want to connect with each other! And in the last years, iGEM teams all around the world are getting together and exchange funny memes or contact data via stickers. Therefore we establish the first iGEM Teams Sticker Album ever created. You want to participate into the biggest social networking event, collect all stickers and win special prizes? Sign up and gotta catch 'em all!
      </p>
    </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("gall-b");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" bg-act", "");
  }

  document.getElementById(cityName)!.style.display = "block";
  event.currentTarget.className += " bg-act";
  }
  return opencity; 
}