tabs

src/components/Buttons.tsx

@@ -71,4 +71,3 @@ return (
 );
 };
   
-  
\ No newline at end of file

src/components/HorizontalTimeline.tsx

@@ -132,6 +132,23 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
         return rows; 
       }
       
+      export function getTypeItems(ta: string){
+        let rows = []
+        for ( let i = 0;  i < data.length; i++ ){
+          if (ta = data[i].tag)
+          rows.push(<TimeItem 
+            title={data[i].title}
+            pic={data[i].pic}
+            tag={data[i].tag}
+            author={data[i].author}
+            tabid={data[i].tabid}
+            >
+              {data[i].text}
+            </TimeItem>)
+        }
+        return rows; 
+      }
+      
       
       let data = [
         {

src/components/Tabs.tsx

+
+export function BFHStyleTabs({data}: {data: Array<NodeDatensatz>}) {
+    let rows = []
+    for ( let i = 0;  i < data.length; i++ ){
+      rows.push(
+        <div id={data[i].eid} className="tabcontent">
+            {data[i].node}
+        </div>
+      )
+    }
+    return rows; 
+  }
\ No newline at end of file

src/components/seclarations.ts

@@ -14,6 +14,10 @@ interface Window {
     datawrapper: Datawrapper;
     renderDatawrapper: () => void;
   }
+  interface NodeDatensatz{
+    node: React.ReactNode, 
+    eid: string
+}
 }
 
 interface Datawrapper {

src/contents/Bfh.tsx

@@ -2,7 +2,25 @@ import { MyTimeline } from "../components/My-Timeline";
 import BFHGallery from "../components/photo-grid";
 import BFHpdf from "../components/pdfs";
 import { H2} from "../components/headings";
-
+import { BFHStyleTabs } from "../components/Tabs";
+let tabbys = [
+  {
+    node: <BFHpdf></BFHpdf>, 
+    eid: "pdf"
+  },
+  {
+    node: <MyTimeline></MyTimeline>, 
+    eid: "timeline"
+  },
+  {
+    node: <BFHGallery/>,
+    eid: "gall"
+  },
+  {
+    node: <About/>, 
+    eid: "about"
+  }
+]
 export function Bfh() {
   
   return (
@@ -46,7 +64,7 @@ export function Bfh() {
 
         </div>
         <div className="col">
-          <LabTabs></LabTabs>
+          <BFHStyleTabs data={tabbys}></BFHStyleTabs>
         </div>
       </div>
       <div className="row">
@@ -57,27 +75,7 @@ export function Bfh() {
   );
 }
 
-export function LabTabs() {
 
-  return (
-    <div>
-      <div id="pdf" className="tabcontent">
-        <BFHpdf></BFHpdf> 
-      </div>
-      <div id="timeline" className="tabcontent">
-      <MyTimeline></MyTimeline>
-      </div>
-      <div id="gall" className="tabcontent">
-        <BFHGallery/>
-      </div>
-      <div id="about" className="tabcontent">
-        <About/> 
-      </div>  
-          
-            
-    </div>
-  );
-}
 
 export function About(){
   return(

src/contents/human-practices.tsx

@@ -8,69 +8,100 @@
 - 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 { TimeHori, getTypeItems } from "../components/HorizontalTimeline";
 import { AllPopus } from "../components/HorizontalTimeline";
+import { BFHStyleTabs } from "../components/Tabs";
 
+let tabbys =[
+  {
+    node: <>
+          <h3>Max</h3>
+          <p></p>
+          </>, 
+    eid: "Max"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Berens"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Wischmeyer"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Friedlein"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Rnhale"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Mattjis"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Eltern"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Physio"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Olariu"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Eltern"
+  },
+  {
+    node: <>
+
+          </>,
+    eid: "Weber"
+  },
+]
 
 export function HumanPractices() {
-  
 
   return (
     <>
-    <div className="row align-items-center bottom-buttons">
-
-    </div>
+    <HPButtonrow/>
     <AllPopus></AllPopus>
     <TimeHori></TimeHori>
-    <div>
-      <div id="Max" className="tabcontent">
-        <h3>London</h3>
-        <p>London is the capital city of England.</p>
-      </div>
-      <div id="Wischmeyer" className="tabcontent">
-        <h3>Paris</h3>
-        <p>Paris is the capital of France.</p> 
-      </div>
-      <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>
-    </div> 
-
+    <BFHStyleTabs data={tabbys}></BFHStyleTabs>
     </>
   );
 }
 
 
+export function HPButtonrow(){
+
+    return(
+        <>
+        <div className="row align-items-center bottom-buttons">
+            
+        </div>
+        </>
+    )
+}
\ No newline at end of file