From 4c8d0827926129ae7d5dfa329f9453a197e355f7 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 18 Jul 2024 22:11:31 +0200
Subject: [PATCH] tag system

---
 src/App/App.css                       | 16 +++++++++
 src/components/HorizontalTimeline.tsx | 22 +++++-------
 src/contents/human-practices.tsx      | 48 ++++++++++++++++++++++-----
 3 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/App/App.css b/src/App/App.css
index 54fe708d..821608eb 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -793,6 +793,22 @@ svg{
   width: fit-content !important;
 }
 
+.Patient{
+  background-color: var(--accen-secondary);
+}
+
+.Medical{
+  background-color: var(--accent-primary);
+}
+
+.Academia{
+  background-color: var(--lightblue);
+}
+
+.Industry{
+  background-color: var(--text-primary);
+}
+
 .timelineolli {
   position: relative;
   display: inline-block;
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 1121b73d..4dd4dd7a 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -1,11 +1,12 @@
  
 
-function TimeItem({color, tag, title, children, pic, author, tabid}: ItemProps){
+function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
+    let cl = "t-tag " + tag; 
     return(
     <li className="timelineolli">
       <div className="timeline-item moretop">
         <div className="">
-            <div className="t-tag" style={{ background: color }}>
+            <div className={cl}>
                 {tag}
             </div>
             <div className="row align-items-center">
@@ -108,7 +109,6 @@ function TimeItem({color, tag, title, children, pic, author, tabid}: ItemProps){
         title: string ,
         children: React.ReactNode;
         tag: string, 
-        color: string,
         pic: string,
         author: string, 
         tabid: string
@@ -124,7 +124,6 @@ function TimeItem({color, tag, title, children, pic, author, tabid}: ItemProps){
             title={data[i].title}
             pic={data[i].pic}
             tag={data[i].tag}
-            color={data[i].color}
             author={data[i].author}
             tabid={data[i].tabid}
             >
@@ -139,28 +138,25 @@ function TimeItem({color, tag, title, children, pic, author, tabid}: ItemProps){
         {
         title: "Deutlich längerer Titel zum Test",
         pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-        tag: "Langer langer TAgs",
-        color: "blue",
+        tag: "Patient",
         author: "author",
-        tabid: "Eins", 
+        tabid: "Max", 
         text: "Text",
         },
         {
           title: "Deutlich längerer Titel zum Test",
           pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-          tag: "Langer langer TAgs",
-          color: "blue",
+          tag: "Academia",
           author: "author",
-          tabid: "Eins", 
+          tabid: "Weber", 
           text: "Text",
           },
         {
         title: "Deutlich längerer Titel zum Test" ,
         pic: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
-        tag:  "Tag",
-        color: "blue",
+        tag:  "Medical Professional",
         author: "a",
-        tabid: "Paris",
+        tabid: "Physio",
         text: "Text",
         }
       ]
\ No newline at end of file
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 5032e466..4d509eea 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -8,8 +8,8 @@
 - Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism) 
 - DNA Strang als Timeline? 
 */
-/* import { TimeHori } from "../components/HorizontalTimeline";
-import { AllPopus } from "../components/HorizontalTimeline"; */
+import { TimeHori } from "../components/HorizontalTimeline";
+import { AllPopus } from "../components/HorizontalTimeline";
 
 
 export function HumanPractices() {
@@ -17,21 +17,51 @@ export function HumanPractices() {
 
   return (
     <>
-{/*     
+    
     <AllPopus></AllPopus>
-    <TimeHori></TimeHori> */}
+    <TimeHori></TimeHori>
     <div>
-      <div id="Eins" className="tabcontent">
+      <div id="Max" className="tabcontent">
         <h3>London</h3>
         <p>London is the capital city of England.</p>
       </div>
-
-      <div id="Paris" className="tabcontent">
+      <div id="Wischmeyer" className="tabcontent">
         <h3>Paris</h3>
         <p>Paris is the capital of France.</p> 
       </div>
-
-      <div id="Zwei" className="tabcontent">
+      <div id="Berens" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Friedlein" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Rnhale" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Mattjis" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Physio" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Eltern" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Olariu" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Weber" className="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+      </div>
+      <div id="Eltern" className="tabcontent">
         <h3>Tokyo</h3>
         <p>Tokyo is the capital of Japan.</p>
       </div>
-- 
GitLab