Skip to content
Snippets Groups Projects
Commit bd7067fa authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

description

parent fbb2588e
No related branches found
No related tags found
No related merge requests found
Pipeline #406972 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/App/App.css
+ 3
− 2
View file @ bd7067fa
......@@ -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
}
src/components/Collapsible.tsx
+ 34
− 1
View file @ bd7067fa
......@@ -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
src/contents/description.tsx
+ 40
− 12
View file @ bd7067fa
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
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