From b98f9b313cd559865ed01d926d4731462751fe37 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 18 Jul 2024 23:07:52 +0200
Subject: [PATCH] tabs
---
src/components/Buttons.tsx | 1 -
src/components/HorizontalTimeline.tsx | 17 ++++
src/components/Tabs.tsx | 12 +++
src/components/seclarations.ts | 4 +
src/contents/Bfh.tsx | 42 ++++----
src/contents/human-practices.tsx | 135 ++++++++++++++++----------
6 files changed, 136 insertions(+), 75 deletions(-)
create mode 100644 src/components/Tabs.tsx
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index bf3fdf60..8fc34880 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -71,4 +71,3 @@ return (
);
};
-
\ No newline at end of file
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 7d626349..ff12beb6 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/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 = [
{
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
new file mode 100644
index 00000000..23f819ff
--- /dev/null
+++ b/src/components/Tabs.tsx
@@ -0,0 +1,12 @@
+
+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
diff --git a/src/components/seclarations.ts b/src/components/seclarations.ts
index 67a7c787..2692a6ac 100644
--- a/src/components/seclarations.ts
+++ b/src/components/seclarations.ts
@@ -14,6 +14,10 @@ interface Window {
datawrapper: Datawrapper;
renderDatawrapper: () => void;
}
+ interface NodeDatensatz{
+ node: React.ReactNode,
+ eid: string
+}
}
interface Datawrapper {
diff --git a/src/contents/Bfh.tsx b/src/contents/Bfh.tsx
index e0b9e3ad..2db4d491 100644
--- a/src/contents/Bfh.tsx
+++ b/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(
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 73874dae..0d804460 100644
--- a/src/contents/human-practices.tsx
+++ b/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
--
GitLab