import { ButtonOneEngineering, openIt } from "../components/Buttons";
import { LoremShort } from "../components/loremipsum";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export function Engineering() {
const location = useLocation();
useEffect(() => {
const params = new URLSearchParams(location.search);
const collapseId = params.get('collapseId');
const tabId = params.get('tab');
// Open the tab specified by tabId
if (tabId) {
// Hide all tabs
const tabs = document.querySelectorAll('.enginneeringtab');
tabs.forEach((tab) => {
(tab as HTMLElement).style.display = 'none';
});
// Show the selected tab
const selectedTab = document.getElementById(tabId);
if (selectedTab) {
selectedTab.style.display = 'block';
}
}
// Scroll to the section specified by collapseId after opening the tab
if (collapseId) {
const collapseElement = document.getElementById(collapseId);
if (collapseElement) {
const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
const scrollPosition = elementTop - offset;
window.scrollTo({
top: scrollPosition,
behavior: 'smooth',
});
}
}
}, [location.search]);
return (
<>
<div className="row mt-4">
<div className="col">
<br/> <br/> <br/>
<div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
<section id="Our Cycle">
<h3>Our Cycle</h3>
<p>Hallo Prime Editing diesdas</p>
<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 id="Proof of Concept" >
<div className="bg-lb box" >
<h3>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" >
<div className="box" >
<h3>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" >
<div className="box" >
<h3>Nikase</h3>
<p><LoremShort></LoremShort></p>
</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" >
<div className="box" >
<h3>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" >
<div className="box" >
<h3>Delivery</h3>
<p id="del1">
<h3>del1</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" >
<h3>References</h3>
<p><LoremShort></LoremShort></p>
<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={openIt({whattoopen: "designing", classnamewhattoopen: "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={openIt({whattoopen: "learning", classnamewhattoopen: "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={openIt({whattoopen: "testing", classnamewhattoopen: "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={openIt({whattoopen: "building", classnamewhattoopen: "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={openIt({whattoopen: "designing", classnamewhattoopen: "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={openIt({whattoopen: "overview", classnamewhattoopen: "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>
)
}