diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index 1ae62906aaaacbb1e9fe7a30444aafdd2ac51074..adb0a36cc686c5d150a82a677f598d473342f3ab 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -2,11 +2,16 @@ export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) { let rows = [] for ( let i = 0; i < data.length; i++ ){ - rows.push( - <div id={data[i].cssname} className={cla}> - {data[i].node} - </div> - ) + if(data[i].main == true){ + rows.push(<div id={data[i].cssname} className={cla} style={{display: "block"}}> + {data[i].node} + </div>) + } + else{ + rows.push(<div id={data[i].cssname} className={cla} style={{display: "none"}}> + {data[i].node} + </div>) + } } return rows; } diff --git a/src/components/seclarations.ts b/src/components/seclarations.ts index 3f53569c483c81a707db9a0c6cc275f73624d363..28056731eb5de42905f5055c763b410c172b3efe 100644 --- a/src/components/seclarations.ts +++ b/src/components/seclarations.ts @@ -22,6 +22,7 @@ interface Window { node: React.ReactNode, cssname: string, buttonname: string + main?: Boolean; } } diff --git a/src/contents/description.tsx b/src/contents/description.tsx index f59838c2bb43744735b95f504c18dc87eff692ee..ba720cee1e89f1eaec02ba1e8b4dce8cbf5f08ab 100644 --- a/src/contents/description.tsx +++ b/src/contents/description.tsx @@ -2,7 +2,7 @@ import { InfoBox } from "../components/Boxes"; import { TabButtonRow } from "../components/Buttons"; import Collapsible from "../components/Collapsible"; import { SupScrollLink } from "../components/ScrollLink"; -import { H2} from "../components/Headings"; +import { H2, H4} from "../components/Headings"; import { LoremMedium, LoremShort } from "../components/Loremipsum"; import { Circle } from "../components/Shapes"; import { Complex } from "../components/Svgs"; @@ -11,6 +11,7 @@ import PieChart from "../components/Graph"; import PreCyse from "../components/precyse"; import { useNavigateTabs } from "../utils/navigation"; import { Section, Subesction } from "../components/sections"; +import { main } from "@popperjs/core"; export function Description() { useNavigateTabs(); @@ -77,7 +78,10 @@ export function Description() { </Subesction> <Subesction title="Symptoms" id="Cystic Fibrosis4"> <p>Text about symptoms</p> - <Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" > Child </Collapsible> + <Collapsible id="symptoms-collapsible" title="How the symptoms affect different parts of the body" > + <TabButtonRow data={symptombuttonrowdata} opentype="meditabs" closing=""/> + <ButtonRowTabs data={symptombuttonrowdata} cla="meditabs"/> + </Collapsible> </Subesction> <Subesction title="Diagnosis" id="Cystic Fibrosis5"> <p>About the ways one can be diagnosed <LoremMedium/></p> @@ -94,8 +98,8 @@ export function Description() { <Subesction title="Treatment" id="Cystic Fibrosis6"> <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/> <Collapsible id="drugs-collapsible" title="Different types of drugs" > - <TabButtonRow data={medibuttonrowdata} opentype="meditabs" closing=""/> - <ButtonRowTabs data={medibuttonrowdata} cla="meditabs"/> + <TabButtonRow data={medibuttonrowdata} opentype="symptabs" closing=""/> + <ButtonRowTabs data={medibuttonrowdata} cla="symptabs"/> </Collapsible> <p>Why we still need other options</p> <img src="https://static.igem.wiki/teams/5247/charts-maps/cfper10-000.png"/> @@ -457,19 +461,40 @@ export function Description() { let medibuttonrowdata =[ { - node: <H2 id="about-btn" text="About"/>, + node: <H4 id="about-btn" text="About"/>, buttonname: "About", - cssname: "First" + cssname: "Med-First", + main: true }, { - node: <H2 id="modulator-btn" text="Modulators"/>, + node: <H4 id="modulator-btn" text="Modulators"/>, buttonname: "Modulators", cssname: "modulators" }, { - node: <H2 id="inhalator-btn" text="Inhalations"/>, + node: <H4 id="inhalator-btn" text="Inhalations"/>, buttonname: "Inhalations", cssname: "inhalations" }, ] + +let symptombuttonrowdata = [ + { + node: <H4 id="about-btn" text="About"/>, + buttonname: "About", + cssname: "Symp-First", + main: true + + }, + { + node: <H4 id="lungs-btn" text="Lungs"/>, + buttonname: "Lungs", + cssname: "lungs" + }, + { + node: <H4 id="pancreas-btn" text="Pancreas"/>, + buttonname: "Pancreas", + cssname: "pancreas" + }, +] \ No newline at end of file