engineering.tsx

import { ButtonOneEngineering } from "../components/Buttons";
import { LoremShort } from "../components/Loremipsum";
import { openElement } from "../utils/openElement";
import { H3 } from "../components/Headings";




export function Engineering() {
   useTabNavigation();
    return (
      <>
        <div className="row mt-4">
          <div className="col">
          <br/> <br/> <br/> 
            <div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
               <section > <br id="obenengineering"/>
                  <div className="bg-lb box" >
                     <H3 text="Our cycle" id="ourcycle"></H3>
                     <p>Hallo Prime Editing diesdas</p>
                  </div>
                  <div className="box" >
                     <p id="cyc1">
                        <h3>cyc1</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                     </p>
                     
                  </div>
                  <div className="box" >
                     <p id="cyc2">
                        <h3>cyc2</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="cyc3">
                        <h3>cyc3</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="cyc4">
                        <h3>cyc4</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <br/>
                  <div className="row">
                     <div className="col">
                     
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="proof-of-concept"/></div>
                     </div>
                  </div>
               </section>
            </div>
            
            <div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
               <section  >
                  <div className="bg-lb box" >
                     <H3 id="Proof of Concept" text="Proof of Concept"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="our-cycle"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="pe-systems"/></div>
                     </div>
                  </div>
               </section>
            </div>
            
            <div className="enginneeringtab" id="tab-pe-systems" style={{display: "none"}}>
            <section id="PE Systems sec" >
                  <div className="bg-lb box" >
                     <H3 id="PE Systems" text="PE Systems"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="proof-of-concept"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="nikase"/></div>
                     </div>
                  </div>
               </section>
            </div>
            <div className="enginneeringtab" id="tab-nikase" style={{display: "none"}}>
            <section id="Nikase sec" >
                  <div className="bg-lb box" >
                     <H3 id="Nikase" text="Nikase"></H3>
                     <p><LoremShort></LoremShort></p>
                     <img src="https://static.igem.wiki/teams/5247/fanzor/movie2-ezgif-com-video-to-gif-converter.gif"></img>
                     
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="pe-systems"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="pegrna"/></div>
                     </div>
                  </div>
               </section>
            </div>
            <div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
            <section id="pegRNA sec" >
                  <div className="bg-lb box" >
                     <H3 id="pegRNA" text="pegRNA"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="nikase"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="delivery"/></div>
                     </div>
                  </div>
               </section>
            </div>
            <div className="enginneeringtab" id="tab-delivery" style={{display: "none"}}>
               <section id="Delivery sec" >
                  <div className="bg-lb box" >
                     <H3 id="Delivery" text="Delivery"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="del1">
                        <h3>del1</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="del2">
                        <h3>del2</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="del3">
                        <h3>del3</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="del4">
                        <h3>del4</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="pegrna"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="references"/></div>
                     </div>
                  </div>
               </section>
            </div>

            <div className="enginneeringtab" id="tab-references" style={{display: "none"}}>
               <section id="References sec" >
                  <div className="bg-lb box" >
                     <H3 id="References" text="References"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="delivery"/></div>
                     </div>
                     <div className="col button-left">
                       
                     </div>
                  </div>
               </section>
            </div>
            
          </div>
  
        </div>
      </>
    );
  } 

  

export function EngineeringCycleTab(){
    return(
 <svg className="rotate-linear-infinite"
    width="100%"
    height="100%"
    viewBox="0 0 133 133"
    id="svg25"
    xmlns="http://www.w3.org/2000/svg">
   <defs
      id="defs1">
     </defs>
   <g
      id="Layer_2"
      data-name="Layer 2"
      style={{strokeWidth:"6",strokeDasharray:"none"}}>
     <g
        id="Plasmid"
        style={{strokeWidth:"6",strokeDasharray:"none"}}>
       <g
          id="g25"
          transform="translate(7.500978,3.0504898)">
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
         <path
            className="cls-7"
            d="m 42.05,115.59 c 27.77,9.19 57.83,-4.79 69.76,-32.23"
             id="path22"
            style={{stroke:"#f4cc1e",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
            </a>
       </g>
       <g
          id="g26"
          transform="translate(8.0019699,2.8418223)"
          style={{strokeWidth:"6",strokeDasharray:"none"}}>  
         <polygon
            className="cls-13"
            points="112.07,83.36 110.94,76.27 117.65,78.84 "
             id="polygon25"
            style={{fill:"#850f78",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
            transform="matrix(2.9806259,0,0,2.9806259,-225.43722,-156.45123)" />
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "learning", classToHide: "cycletab"})}>
            <path
              className="cls-12"
              d="M 114,78.55 C 123.45,50.86 110,20.75 82.66,8.6"
              id="path25"
              style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} /> 
           
         <text
            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text31"
            transform="translate(5.6902194,-0.11551883)"><textPath
             xlinkHref="#path25"
              id="textPath33">Learn<tspan
          id="tspan31" /></textPath></text>  </a>
       </g>
       <g
          id="g27"
          style={{strokeWidth:"6",strokeDasharray:"none"}}
          transform="translate(8.0019699,2.8418223)">
         <polygon
            className="cls-10"
             points="62.53,7.12 63.47,0 69.17,4.37 "
            id="polygon23"
             transform="matrix(2.7712263,0.58147548,-0.58147548,2.7712263,-96.587828,-39.748071)"
            style={{fill:"#a0a7f3",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
            inkscape:transform-center-x="3.6173751"
            inkscape:transform-center-y="5.1978852" />
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "testing", classToHide: "cycletab"})}>
         <path
            className="cls-9"
            d="M 78.599111,7.5468264 C 43.820346,-2.6177588 13.956746,14.286046 4.2106281,46.368749"
            id="path23"
            style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
         <text
            
            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text28"
            
            transform="translate(-0.03023506,-5.9602336)"><textPath
            xlinkHref="#path23"
             id="textPath28">Test</textPath></text> </a>
       </g>
       <g
          id="g28"
          style={{strokeWidth:"6",strokeDasharray:"none"}}
          transform="translate(8.0019699,2.8418223)">
         <polygon
            className="cls-13"
            points="117.65,78.84 112.07,83.36 110.94,76.27 "
             id="polygon25-6"
            style={{fill:"#f57d22",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
            transform="matrix(-2.9650314,0.30449893,-0.30449893,-2.9650314,364.84067,249.28249)" />
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "building", classToHide: "cycletab"})}>
          <path
            className="cls-11"
            d="M 2.6659753,50.953505 C -2.0956694,72.727915 10.936866,102.94273 36.656234,113.62834"
             id="path24"
            style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
         <text
            
            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text32"
            transform="translate(-5.7110315,1.7453243)"><textPath
             xlinkHref="#path24"
              id="textPath32">Build<tspan
    id="tspan32" /></textPath></text> </a>
       </g>
       <polygon
          className="cls-8"
          points="37.22,113.74 44.3,112.56 41.78,119.28 "
          id="polygon22"
          style={{strokeWidth:"6",strokeDasharray:"none",fill:"#f4cc1e",fillOpacity:"1"}}
          transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
          <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
       <text
          
          style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
          id="text29"
          transform="translate(8.4052921,8.8553334)"><textPath
          xlinkHref="#path22"
          id="textPath34">Design<tspan
          id="tspan29" /></textPath></text> </a>
     </g>
   </g>
   <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "overview", classToHide: "cycletab"})}>
   <circle
     style={{opacity:"0.85",fill:"#e2dad7",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",paintOrder:"fill markers stroke"}}
     id="path1"
     cx="67.916214"
     cy="63.214005"
     r="20" />
  <text
     style={{fontSize:"8px",lineHeight:"0",fontFamily:"Arial",opacity:"0.85",fill:"#000000",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",paintOrder:"fill markers stroke"}}
     x="50.929825"
     y="66.676674"
     id="text1">
      <tspan
       id="tspan1"
       x="50.929825"
       y="66.676674"
       style={{fontSize:"8px"}}>Overview</tspan></text> 
       </a>

 </svg>
 
    )
 }