From 5a7ae00aa3fa790d42342c19c1f5096a9e58ff8a Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 22 Sep 2024 16:14:45 +0200
Subject: [PATCH] symptoms

---
 src/App/App.css                       | 16 +++++++++++++++
 src/components/HP-timeline.tsx        |  2 +-
 src/components/HorizontalTimeline.tsx |  2 +-
 src/contents/description.tsx          | 29 +++++++++++++--------------
 src/data/hptimelinedata.tsx           |  2 +-
 src/data/symptom-data.tsx             | 20 ++++++++++++++++++
 6 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/data/symptom-data.tsx

diff --git a/src/App/App.css b/src/App/App.css
index dcf85b5a..cbf88274 100644
--- a/src/App/App.css
+++ b/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
diff --git a/src/components/HP-timeline.tsx b/src/components/HP-timeline.tsx
index dcfeb120..d5f6db26 100644
--- a/src/components/HP-timeline.tsx
+++ b/src/components/HP-timeline.tsx
@@ -1,7 +1,7 @@
 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">
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index db8570fc..7cd76f97 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -1,5 +1,5 @@
 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(
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index c1cc3ca6..515aec0c 100644
--- a/src/contents/description.tsx
+++ b/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
diff --git a/src/data/hptimelinedata.tsx b/src/data/hptimelinedata.tsx
index af1e9ccc..51b41c43 100644
--- a/src/data/hptimelinedata.tsx
+++ b/src/data/hptimelinedata.tsx
@@ -1,4 +1,4 @@
-import {ScrollLinkWithChild } from "../ScrollLink";
+import { ScrollLinkWithChild } from "../components/ScrollLink";
 
 export interface TimelineDatenpunkt {
   title?: string; /* Prof. , Dr., ... */
diff --git a/src/data/symptom-data.tsx b/src/data/symptom-data.tsx
new file mode 100644
index 00000000..f435c58f
--- /dev/null
+++ b/src/data/symptom-data.tsx
@@ -0,0 +1,20 @@
+
+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
-- 
GitLab