From bd7067facc1e1810554bf5bbd25db4afd83cfe10 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 22 Aug 2024 13:53:14 +0200
Subject: [PATCH] description
---
src/App/App.css | 5 ++--
src/components/Collapsible.tsx | 35 ++++++++++++++++++++++-
src/contents/description.tsx | 52 ++++++++++++++++++++++++++--------
3 files changed, 77 insertions(+), 15 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index ea6c125c..12f1138e 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 15d78fd2..5b10fbde 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 c1e72038..5d048de0 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
--
GitLab