Skip to content
Snippets Groups Projects
Commit a201b887 authored by Yifeng Wang's avatar Yifeng Wang
Browse files

all

parent 4ad2af20
No related branches found
No related tags found
No related merge requests found
Pipeline #514338 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/contents/contribution.tsx
+ 81
− 89
View file @ a201b887
......@@ -7,21 +7,17 @@ import React,{useEffect,useState} from 'react';
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="section1" smooth={true} duration={500} className={activeLink === 'section1' ? 'active' : 'notActive'}>Parts</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>
......@@ -29,6 +25,28 @@ const SideNavbar: React.FC<SideNavbarProps> = ({ activeLink }) => {
};
// sidenavbar end
const basicParts: TableRowData[] = [
{ id: 'BBa_K5378000', type: 'Coding', description: 'GS',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378000' },
{ id: 'BBa_K5378001', type: 'Coding', description: 'TPH1',class:"table-element-orange",link:'https://parts.igem.org/Part:BBa_K5378001'},
{ id: 'BBa_K5378006', type: 'Coding', description: 'tynA-G494S',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378006'},
{ id: 'BBa_K5378007', type: 'Coding', description: 'feaR-A81L',class:"table-element-orange",link:'https://parts.igem.org/Part:BBa_K5378007'},
{ id: 'BBa_K5378009', type: 'Promoter', description: 'PtynA',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378009'},
{ id: 'BBa_K5378011', type: 'Coding', description: 'CsgA',class:"table-element-orange",link:'https://parts.igem.org/Part:BBa_K5378011'},
{ id: 'BBa_K5378012', type: 'Coding', description: 'TFF3',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378012'},
{ id: 'BBa_K5378016', type: 'RBS', description: 'RBS',class:"table-element-orange",link:'https://parts.igem.org/Part:BBa_K5378016'},
{ id: 'BBa_K5378018', type: 'Coding', description: 'GFP',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378018' },
{ id: 'BBa_K5378020', type: 'Coding', description: '6xHis',class:"table-element-orange table-bottom-line",link:'https://parts.igem.org/partsdb/edit_seq.cgi?part=BBa_K5378020'},
];
const compositeParts: TableRowData[] = [
{ id: 'BBa_K5378002', type: 'Composite', description: 'PtynA-RBS-TPH1',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378002' },
{ id: 'BBa_K5378003', type: 'Composite', description: 'PtynA-RBS-GS',class:"table-element-orange",link:'https://parts.igem.org/Part:BBa_K5378003'},
{ id: 'BBa_K5378004', type: 'Composite', description: 'feaR-A81L-G494S-PtynA-GS',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378004'},
{ id: 'BBa_K5378005', type: 'Composite', description: 'feaR-A81L-G494S-PtynA-TPH1',class:"table-element-orange",link:'https://parts.igem.org/Part:BBa_K5378005'},
{ id: 'BBa_K5378019', type: 'Composite', description: 'PtynA-RBS-GFP',class:"table-element-yellow",link:'https://parts.igem.org/Part:BBa_K5378019'},
{ id: 'BBa_K5378021', type: 'Composite', description: 'CsgA-6xHis-TFF3',class:"table-element-orange table-bottom-line",link:'https://parts.igem.org/Part:BBa_K5378021'},
];
export function Contribution() {
......@@ -76,7 +94,59 @@ export function Contribution() {
</div>
<div className="col-10">
<Element name="section1" className="element rounded-border" id='section1'>
<p className="indent">We have built several BioBricks, which cover all aspects throughout our projects, constituting our sensory module, metabolic module, and safety module.</p>
<h2>1.Our Basic Parts</h2>
<p className="indent">We designed six basic parts in total this year,you can click on the part to see details.</p>
<table className="three-line-table">
<thead>
<tr className='table-head-line'>
<th>Part Name</th>
<th>Type</th>
<th>Short Description</th>
</tr>
</thead>
<tbody>
{basicParts.map((row) => (
<tr className={row.class} key={row.id}>
<td><a href={row.link}>{row.id}</a></td>
<td>{row.type}</td>
<td>{row.description}</td>
</tr>
))}
</tbody>
</table>
<h2>2.Our Composite Parts</h2>
<p className="indent">We designed seven composite parts in total this year,you can click on the part to see details.</p>
<table className="three-line-table">
<thead>
<tr className='table-head-line'>
<th >Part Name</th>
<th >Type</th>
<th >Short Description</th>
</tr>
</thead>
<tbody>
{compositeParts.map((row) => (
<tr className={row.class} key={row.id}>
<td><a href={row.link}>{row.id}</a></td>
<td>{row.type}</td>
<td>{row.description}</td>
</tr>
))}
</tbody>
</table>
<h2> 3.Contribution</h2>
<p className="indent">In addition, we have added content to the uploaded parts.</p>
<p className="indent">We optimized the codon of <a href='https://parts.igem.org/Part:BBa_K3924011'>BBa_K3924011</a> and <a href='https://parts.igem.org/Part:BBa_K3924002'>BBa_K3924002</a>, and added two basic components accordingly, namely <a href='https://parts.igem.org/Part:BBa_K5378011'>BBa_K5378011</a> and <a href='https://parts.igem.org/Part:BBa_K5378012'>BBa_K5378012</a>.</p>
<p className="indent">Moreover, we added information to an existing part created by iGEM21_Tsinghua, clearly documenting our Functional Verification on the Part's Main Page on the Registry. Here shows the link <a href='https://parts.igem.org/Part:BBa_K3924029'>BBa_K3924029</a>.And we also make our new composite part <a href='https://parts.igem.org/Part:BBa_K5378021'>BBa_K5378021</a>.</p>
</Element>
<Element name="section1" className="element rounded-border" id='section1'>
<h2>Section 1</h2>
......@@ -118,85 +188,7 @@ export function Contribution() {
</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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment