-
Wenyi Guan authoredWenyi Guan authored
results.tsx 12.60 KiB
import { Nav } from 'react-bootstrap';
import { Link,Element } from 'react-scroll';
import React,{useEffect,useState} from 'react';
// sidenavbar begin
interface SideNavbarProps {
activeLink: string;
}
const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
return (
<div className="side-navbar">
<Nav className="flex-column">
<Nav.Link as={Link} to="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Section 1</Nav.Link>
<Nav.Link as={Link} to="section2" smooth={true} duration={500} className={activeLink === 'section2' ? 'active' : 'notActive'}>Section 2</Nav.Link>
<Nav.Link as={Link} to="section3" smooth={true} duration={500} className={activeLink === 'section3' ? 'active' : 'notActive'}>Section 3</Nav.Link>
<Nav.Link as={Link} to="section4" smooth={true} duration={500} className={activeLink === 'section4' ? 'active' : 'notActive'}>Section 4</Nav.Link>
<Nav.Link as={Link} to="section5" smooth={true} duration={500} className={activeLink === 'section5' ? 'active' : 'notActive'}>Section 5</Nav.Link>
<Nav.Link as={Link} to="section6" smooth={true} duration={500} className={activeLink === 'section6' ? 'active' : 'notActive'}>Section 6</Nav.Link>
<Nav.Link as={Link} to="section7" smooth={true} duration={500} className={activeLink === 'section7' ? 'active' : 'notActive'}>Section 7</Nav.Link>
<Nav.Link as={Link} to="section8" smooth={true} duration={500} className={activeLink === 'section8' ? 'active' : 'notActive'}>Section 8</Nav.Link>
<Nav.Link as={Link} to="section9" smooth={true} duration={500} className={activeLink === 'section9' ? 'active' : 'notActive'}>Section 9</Nav.Link>
<Nav.Link as={Link} to="section10" smooth={true} duration={500} className={activeLink === 'section10' ? 'active' : 'notActive'}>Section 10</Nav.Link>
<Nav.Link as={Link} to="section11" smooth={true} duration={500} className={activeLink === 'section11' ? 'active' : 'notActive'}>Section 11</Nav.Link>
{/* 添加更多导航链接 */}
</Nav>
</div>
);
};
// sidenavbar end
export function Results() {
// sidenavbar begin
const [activeLink, setActiveLink] = useState<string>('');
useEffect(() => {
const handleScroll = () => {
const sections = document.querySelectorAll('.element');
let currentSection = '';
sections.forEach(section => {
const sectionTop = section.getBoundingClientRect().top;
if (sectionTop <= window.innerHeight / 2 && sectionTop > -section.clientHeight) {
currentSection = section.id;
}
});
setActiveLink(currentSection);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// sidenavbar end
return (
<>
<div className="custom-header-results">
<h1 className="centered-title">
<img
src="https://static.igem.wiki/teams/5378/header/results.png"
alt="safety header"
className="header-img"
/>
<img
src="https://static.igem.wiki/teams/5378/header/header-bar.webp"
alt="safety header"
className="header-bar"
/>
</h1>
</div>
<div className="row bg-rice_yellow">
<div className="col-2">
<SideNavbar activeLink={activeLink} />
</div>
<div className="col-10">
<Element name="section1" className="element rounded-border" id='section1'>
<h2>Sensing Module Validation</h2>
<p>To demonstrate that PEA, a reliable risk factor of HE identified by the current work of our secondary PI (see details in our Design page) , could initiate the downstream gene circuit, we first engineered Escherichia coli Nissle 1917(EcN) to produce FeaR and TynA constantly by transforming EcN with plasmid Pcon-tynA-Pcon-feaR. Thereby, PEA could be degraded by the enzyme TynA into PAG and PAG could bind with FeaR as a transcriptional factor, which could activate the inducible promoter PTynA. Then we transformed the engineered EcN with plasmid PTynA-GFP to demonstrate the feasibility and efficiency of sensing module via fluorensence (Figure 1a).</p>
<p>After coculturing with 0, 5, 25, 50 and 100ng/ml PEA for 12 hours, results showed a significant increase in fluorensence under microscopy, along with the the increased level in PEA concentration (Figure 1b), suggesting a successful expression and high feasibility of the sensing module. Moreover, the fluorescent intensity under different concentrations of PEA throughout 24 hours also verified that our engineered EcN could indeed be more sensitive to the increase in PEA concentration (Figure 1c).</p>
<img
src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
alt="example"
className="responsive-img"
/>
<figcaption className='caption'></figcaption>
</Element>
<div className="bd-callout bd-callout-info bg-gray">
<h1>What do we do to ...? See...</h1>
</div>
<Element name="section2" className="element rounded-border" id='section2'>
<h2>Section 2</h2>
<p>Content for section 2.</p>
<img
src="https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp"
alt="example"
className="responsive-img"
/>
<figcaption className='caption'></figcaption>
</Element>
<Element name="section3" className="element rounded-border" id='section3'>
<h2>Section 3</h2>
<p>Content for section 3.</p>
<div className="rounded-border">
<h4 className="center-text">Section 3</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section4" className="element rounded-border" id='section4'>
<h2>Section 4</h2>
<p>Content for section 4.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section5" className="element rounded-border" id='section5'>
<h2>Section 5</h2>
<p>Content for section 5.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section6" className="element rounded-border" id='section6'>
<h2>Section 6</h2>
<p>Content for section 6.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section7" className="element rounded-border" id='section7'>
<h2>Section 7</h2>
<p>Content for section 7.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section8" className="element rounded-border" id='section8'>
<h2>Section 8</h2>
<p>Content for section 8.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section9" className="element rounded-border" id='section9'>
<h2>Section 9</h2>
<p>Content for section 9.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section10" className="element rounded-border" id='section10'>
<h2>Section 10</h2>
<p>Content for section 10.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
<Element name="section11" className="element rounded-border" id='section11'>
<h2>Section 11</h2>
<p>Content for section 11.</p>
<div className="rounded-border">
<h4 className="center-text">我是大帅B</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div>
</Element>
</div>
<div className="col-1"></div>
</div>
</>
);
}