diff --git a/src/App/App.css b/src/App/App.css
index ea6c125cf04bf0082c7ddf6f03e99bd70430a8ed..12f1138ef590b21697ef157d524a2050f944dfd2 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -964,7 +964,7 @@ svg{
/*boxes*/
.hint-container {
position:relative;
- transition:background var(--vp-ct),border-color var(--vp-ct),color var(--vp-ct)
+ transition:background var(--vp-ct)border-color var(--vp-ct),color var(--vp-ct)
}
@media print {
.hint-container {
@@ -3336,4 +3336,5 @@ a{
content: "";
position: absolute;
background: var(--accent-gradient-three-of-three);
-}
\ No newline at end of file
+}
+
diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index 15d78fd251d733685f306ca252106fc6c675ac3b..5b10fbde6230e787686d54cc1f7a2c4e3ab79db2 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -73,4 +73,37 @@ interface IProps {
};
- export default Collapsible;
\ No newline at end of file
+ export default Collapsible;
+
+ export const CollapsibleInfoBox: React.FC<IProps> = ({ open, children, title }) => {
+ const [isOpen, setIsOpen] = useState(open);
+
+ const handleFilterOpening = () => {
+ setIsOpen((prev) => !prev);
+ };
+
+ return (
+ <>
+ <div className="collapse-card bg-info">
+ <div>
+ <div className="d-flex justify-content-between">
+ <h6 className="font-weight-bold collapsible-a">{title}</h6>
+ <button type="button" className="btn" onClick={handleFilterOpening}>
+ {!isOpen ? (
+ <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-down.png" />
+ ) : (
+ <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-up32px.png" />
+ )}
+ </button>
+ </div>
+ </div>
+
+ <div className="">
+ <div>{isOpen && <div className="p-3"> <hr className='collapsible-hr'/> {children}</div>}</div>
+ </div>
+ </div>
+ </>
+ );
+ };
+
+
\ No newline at end of file
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index c1e720385300d5a79514d1d8cb4bc19500859712..5d048de0c94415a7b06d7a59d4235304d2e2c547 100644
--- a/src/contents/description.tsx
+++ b/src/contents/description.tsx
@@ -1,6 +1,10 @@
+import { InfoBox } from "../components/Boxes";
+import { TabButtonRow } from "../components/Buttons";
+import Collapsible, { CollapsibleInfoBox } from "../components/Collapsible";
import { H2} from "../components/headings";
import { Circle } from "../components/Shapes";
import { Complex } from "../components/svgs";
+import { ButtonRowTabs } from "../components/Tabs";
/* import PieChart from './Graph.tsx'; */
export function Description() {
@@ -68,12 +72,12 @@ export function Description() {
</div>*/}
{/* <h3>Treatment</h3> */}
{/*<img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> */}
- {/* <Collapsible title="Different types of drugs" >
+ <Collapsible title="Different types of drugs" >
<TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/>
<ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/>
- </Collapsible> */}
- {/* <p>Why we still need other options</p> */}
- {/* <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/> */}
+ </Collapsible>
+ <p>Why we still need other options</p>
+ <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/>
</section>
</div>
@@ -81,15 +85,15 @@ export function Description() {
<section id="Our motivation" className="section">
<H2 text="Our motivation"></H2>
<p>We chose to focus on CF and specifically the ΔF508 mutation due to its prevalence and the severe impact it has on patients' lives. Additionally, our team includes members who have close friends affected by this condition, giving us a personal connection and a strong motivation to find a solution. By targeting the ΔF508 mutation, we aim to develop a therapy that could potentially, not only benefit many CF patients and make a significant improvement in their lives, but also can serve as a template, which research groups can use to target other genetic diseases. </p>
- {/* <div className="row align-items-center">
+ <div className="row align-items-center">
<div className="col" >
About del508
</div>
<div className="col" >
- <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <img className="img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
</div>
</div>
- <p>Max</p> */}
+ <p>Max</p>
</section>
</div>
@@ -97,9 +101,12 @@ export function Description() {
<section id="Approach" className="section">
<H2 text="Approach"></H2>
<p>To correct the mutation, we are utilizing Prime Editing technologies. Prime Editing is a genome editing technique that allows precise DNA modifications without causing double-strand breaks<a href="#desc-two"><sup>2</sup></a>. Structurally, the Prime Editing complex consists of a Cas9 endonuclease fused to a reverse transcriptase (RT) and guided by a pegRNA, which directs the complex to the target site in the genome. </p>
-{/* <InfoBox title="Prime Editing">
- About prime editing
- </InfoBox> */}
+ <InfoBox title="Prime Editing">
+ <details>
+ <summary>Prime editing is a new method of gene editing based on an RNA-Protein complex. It was developed by a group of researchers revolving around Professor David Liu from Harvard University in 2019. <a href="#desc-nine"><sup>9</sup></a></summary>
+ <p>Details</p>
+ </details>
+ </InfoBox>
{/* <img className="img-right img-half" src="https://static.igem.wiki/teams/5247/scientific-figures/komplex-komplett-beschriftet.svg"/>
*/} <div className="img-right img-half"><Complex></Complex></div>
@@ -267,6 +274,28 @@ export function Description() {
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2021">2021</time>).
<a className="doi" href="https://doi.org/10.1016/j.actbio.2020.10.031"> doi: 10.1016/j.actbio.2020.10.031</a>
</li>
+ {/* <!-- Citation num 9--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-nine">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Anzalone, A.V.</span>,
+ <span property="schema:Name"> Randolph, P.B.</span>,
+ <span property="schema:Name"> Davis, J.R.</span>,
+ <span property="schema:Name"> Sousa, A.A.</span>,
+ <span property="schema:Name"> Koblan, L.W.</span>,
+ <span property="schema:Name"> Levy, J.M.</span>,
+ <span property="schema:Name"> Chen, P.J.</span>,
+ <span property="schema:Name"> Wilson, C.</span>,
+ <span property="schema:Name"> Newby, G.A.</span>,
+ <span property="schema:Name"> Raguram, A.</span>,
+ <span property="schema:Name"> Liu, D.R.</span>
+ </span>
+ <span property="schema:name"> Search-and-replace genome editing without double-strand breaks or donor DNA.</span>
+ <i property="schema:publisher" typeof="schema:Organization"> Nature </i>
+ <b property="issueNumber" typeof="PublicationIssue">7785</b>,
+ <span property="schema:pageBegin"> 149</span>-<span property="schema:pageEnd">157 </span>
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2021">2019</time>).
+ <a className="doi" href="https://doi.org/10.1038/s41586-019-1711-4"> doi: 10.1038/s41586-019-1711-4</a>
+ </li>
@@ -282,7 +311,7 @@ export function Description() {
);
}
-/* let medibuttonrowdata =[
+ let medibuttonrowdata =[
{
node: <div>About</div>,
buttonname: "About",
@@ -300,4 +329,3 @@ export function Description() {
cssname: "inhalations"
},
]
- */
\ No newline at end of file