symptoms

src/App/App.css

@@ -3714,3 +3714,19 @@ a{
   padding-left: 10px !important;
 }
 
+
+
+.symptom-img-wrapper{
+  border-radius: 50% !important;
+  background-color: var(--accent-primary); 
+  height: 150px;
+  width: 150px;
+  display: flex;
+  align-items: center;
+}
+.symptom-img-wrapper img{
+  margin:  auto;
+  display: inline;
+  max-width: 80%;
+  max-height: 80%;
+}
\ No newline at end of file

src/components/HP-timeline.tsx

 import { TabButtonRow } from "./Buttons";
 import TimeHori from "./HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
-import { timelinedata } from "./data/hptimelinedata";
+import { timelinedata } from "../data/hptimelinedata";
 export function HPTimeline(){
     return(
       <section id="Timeline" className="section">

src/components/HorizontalTimeline.tsx

 import { HPMoreButton } from "./Buttons";
-import { timelinedata } from "./data/hptimelinedata";
+import { timelinedata } from "../data/hptimelinedata";
 function TimeItem({tag, title, pic, author, tabid}: ItemProps){
     let cl = "t-tag " + tag;
     return(

src/contents/description.tsx

@@ -12,6 +12,7 @@ import PreCyse from "../components/precyse";
 import { useNavigateTabs } from "../utils/navigation";
 import { Section, Subesction } from "../components/sections";
 import { stringToSlug } from "../utils";
+import { symptomdata, SymptomDatensatz } from "../data/symptom-data";
 
 export function Description() { 
     useNavigateTabs();
@@ -479,12 +480,7 @@ export function Description() {
     },
 ]
 
-let symptomdata = [
-    {
-        name: "lung", 
-        picture: "Picture"
-    }
-]
+
 
 let symptombuttonrowdata = [
     {
@@ -494,14 +490,14 @@ let symptombuttonrowdata = [
         main: true
     },
     {   
-        node: <H4 id="lungs-btn" text="Lungs"/>,
+        node: createSymptomSteckbrief(symptomdata[1]), 
         buttonname: "Lungs", 
         cssname: "lungs"
     },
     {
-        node: <H4 id="darm-btn" text="Digestive System"/>, 
-        buttonname: "Digestive System", 
-        cssname: "darm"
+        node: createSymptomSteckbrief(symptomdata[2]), 
+        buttonname: "Pancreas", 
+        cssname: "pancreas"
     },
     {
         node: <H4 id="mental-btn" text="Mental Health"/>, 
@@ -509,10 +505,6 @@ let symptombuttonrowdata = [
         cssname: "mental"
     },
 ]
-interface SymptomDatensatz {
-    name: string;  
-    picture: string; 
-}
 
 
 
@@ -522,7 +514,14 @@ function createSymptomSteckbrief(data: SymptomDatensatz){
     return(
         <div>
             <H4 id={`${data.name}-btn`} text={stringToSlug(data.name)}/>
-            {data.picture}
+            <div className="col-2">
+                <div className="symptom-img-wrapper">
+                    <img src={data.picture} className="symptom-img"/>
+                </div>
+            </div>
+            <div className="col">
+
+            </div>
         </div>
     )
 }
\ No newline at end of file

src/data/hptimelinedata.tsx

-import {ScrollLinkWithChild } from "../ScrollLink";
+import { ScrollLinkWithChild } from "../components/ScrollLink";
 
 export interface TimelineDatenpunkt {
   title?: string; /* Prof. , Dr., ... */

src/data/symptom-data.tsx

+
+export interface SymptomDatensatz {
+    name: string;  
+    picture: string; 
+}
+
+export const symptomdata: (Array<SymptomDatensatz>)  = [
+    {
+        name: "About",
+        picture: "https://static.igem.wiki/teams/5247/scientific-figures/organs-together-normal.svg"
+    },
+    {
+        name: "Lung", 
+        picture: "https://static.igem.wiki/teams/5247/scientific-figures/lung-normal.svg"
+    },
+    {
+        name: "Pancreas", 
+        picture: "https://static.igem.wiki/teams/5247/scientific-figures/pancras-normal.svg"
+    }
+]
\ No newline at end of file