header vereinzelt

src/App/App.tsx

@@ -3,7 +3,6 @@ import "./App.scss";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { Route, Routes } from "react-router-dom";
 import { Footer } from "../components/Footer.tsx";
-import { Header } from "../components/Header.tsx";
 import { NotFound } from "../components/NotFound.tsx";
 import { Navbar } from "../components/Navbar.tsx";
 import { getPathMapping } from "../utils/getPathMapping.ts";
@@ -38,13 +37,14 @@ const App = () => {
       {/* Header and PageContent */}
       <Routes>
         {Object.entries(pathMapping).map(
-          ([path, {title, lead, component: Component}]) => (
+          ([path, {component: Component, header: Head}]) => (
             <Route
               key={path}
               path={path}
               element={
                 <>
-                  {/* <Header title={title || ""} lead={lead || ""} /> */}
+                  <Head/>
+                  {/* <Header title={title || ""} lead={lead || ""}/> */}
                   {/* Page content */}
                   <div className="container-fluid">
                     <div className="row ">
@@ -80,10 +80,7 @@ const App = () => {
           path="*"
           element={
             <>
-              <Header
-                title="Not Found"
-                lead="The requested URL was not found on this server."
-              />
+              
               <NotFound />
             </>
           }

src/components/Header.tsx

-import { H1 } from './headings.tsx';
-interface HeaderProps {
+/* import { H1 } from './headings.tsx'; */
+/* interface HeaderProps {
   title: string;
   lead: string;
-}
+} */
 
-export function Header({ title, lead }: HeaderProps) {
+export function Header(/* { title, lead }: HeaderProps */) {
   return (
     <header className="py-5 mb-5">
       <div className="container h-100">
         <div className="row h-100 align-items-center">
           <div className="col-lg-12">
-          <H1 text={title}></H1>
-            <p className="lead mb-5">{lead}</p>
+          {/* <H1 text={title}></H1> */}
+           {/*  <p className="lead mb-5">{lead}</p> */}
           </div>
         </div>
       </div>

src/contents/Bfh.tsx

@@ -2,6 +2,7 @@ import { MyTimeline } from "../components/My-Timeline";
 import BFHGallery from "../components/photo-grid";
 import BFHpdf from "../components/pdfs";
 import { H2} from "../components/headings";
+import { Header } from "../components/Header";
 
 export function Bfh() {
   

src/contents/index.tsx

@@ -29,5 +29,18 @@ export * from "./sustainable.tsx"; */
 export * from "./Bfh.tsx";
 export * from "./wiki.tsx";
 export * from "./impressum.tsx";
+export * from "../headers/bhf-h.tsx"
+export * from "../headers/attribution-h.tsx"
+export * from "../headers/cont-h.tsx"
+export * from "../headers/desc-h.tsx"
+export * from "../headers/home-h.tsx"
+export * from "../headers/exp-h.tsx"
+export * from "../headers/hp-h.tsx"
+export * from "../headers/imp-h.tsx"
+export * from "../headers/note-h.tsx"
+export * from "../headers/res-h.tsx"
+export * from "../headers/safe-h.tsx"
+export * from "../headers/team-h.tsx"
+export * from "../headers/wiki-h.tsx"
 
 

src/headers/attribution-h.tsx

+export function ATTH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/bhf-h.tsx

+
+export function BFHH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
+  
\ No newline at end of file

src/headers/cont-h.tsx

+export function CONTH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/desc-h.tsx

+export function DESCH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/exp-h.tsx

+export function EXPH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/home-h.tsx

+export function HOMEH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/hp-h.tsx

+export function HPH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/imp-h.tsx

+export function IMPH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/note-h.tsx

+export function NOTEH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/res-h.tsx

+export function RESH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/safe-h.tsx

+export function SAFEH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/team-h.tsx

+export function TEAMH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+           
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/headers/wiki-h.tsx

+export function WIKIH() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
\ No newline at end of file

src/pages.ts

@@ -16,6 +16,8 @@
   Impressum
 } from "./contents"; 
 
+import { BFHH, HOMEH, HPH, RESH, ATTH, CONTH, DESCH, EXPH, IMPH, NOTEH, SAFEH, TEAMH, WIKIH } from "./contents";
+
 interface Base {
   name: string | undefined;
 }
@@ -30,7 +32,7 @@ class Page implements Base {
   title: string | undefined;
   path: string | undefined;
   component: React.FC | undefined;
-  lead: string | undefined;
+  header!: React.FC;
   navlist: Array<string> | undefined; 
 }
 
@@ -40,7 +42,7 @@ const Pages: (Page | Folder)[] = [
     title: "Bielefeld CeBiTec",
     path: "/",
     component: Home,
-    lead: "Precision with every breath",
+    header: HOMEH,
     navlist: [""],
     },
     {
@@ -51,7 +53,7 @@ const Pages: (Page | Folder)[] = [
           title: "Team",
           path: "/team",
           component: Team,
-          lead: "On this page you can introduce your team members, instructors, and advisors.",
+          header: TEAMH,
           navlist: [""],
         },
         {
@@ -59,15 +61,15 @@ const Pages: (Page | Folder)[] = [
           title: "Attributions",
           path: "/attributions",
           component: Attributions,
-          lead: "In the iGEM Competition, we celebrate student effort and achievement. The Attributions form helps the judges differentiate between what students accomplished from how their external collaborators supported them. Therefore, teams must clearly explain on the standard Project Attributions form what work they have conducted by themselves and what has been done by others.",
-          navlist: [""],
+          header: ATTH,
+           navlist: [""],
         },
         {
           name: "Impressum",
           title: "Impressum",
           path: "/impressum",
           component: Impressum,
-          lead: "In the iGEM Competition, we celebrate student effort and achievement. The Attributions form helps the judges differentiate between what students accomplished from how their external collaborators supported them. Therefore, teams must clearly explain on the standard Project Attributions form what work they have conducted by themselves and what has been done by others.",
+           header: IMPH,
           navlist: [""],
         },
       ],
@@ -80,7 +82,7 @@ const Pages: (Page | Folder)[] = [
           title: "Contribution",
           path: "/contribution",
           component: Contribution,
-          lead: "Make a useful contribution for future iGEM teams. Use this page to document that contribution.",
+          header: CONTH,
           navlist: [""],
         },
         {
@@ -88,7 +90,7 @@ const Pages: (Page | Folder)[] = [
           title: "Project Description",
           path: "/description",
           component: Description,
-          lead: "",
+          header: DESCH,
           navlist: ["Abstract", "Cystic Fibrosis", "Our motivation", "Approach", "Delivery", "Our vision", "References"]
         },
         /* {
@@ -96,7 +98,7 @@ const Pages: (Page | Folder)[] = [
           title: "Engineering Success",
           path: "/engineering",
           component: Engineering,
-          lead: "Demonstrate engineering success in a technical aspect of your project by going through at least one iteration of the engineering design cycle. This achievement should be distinct from your Contribution for Bronze.",
+          header: "Demonstrate engineering success in a technical aspect of your project by going through at least one iteration of the engineering design cycle. This achievement should be distinct from your Contribution for Bronze.",
           navlist: [""],
         }, */
         {
@@ -104,7 +106,7 @@ const Pages: (Page | Folder)[] = [
           title: "Experiments",
           path: "/experiments",
           component: Experiments,
-          lead: "Describe the research, experiments, and protocols you used in your iGEM project.",
+          header: EXPH,
           navlist: [""],
         },
         {
@@ -112,7 +114,7 @@ const Pages: (Page | Folder)[] = [
           title: "Notebook",
           path: "/notebook",
           component: Notebook,
-          lead: "Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.",
+          header: NOTEH,
           navlist: [""],
         },
         {
@@ -120,7 +122,7 @@ const Pages: (Page | Folder)[] = [
           title: "Results",
           path: "/results",
           component: Results,
-          lead: "You can describe the results of your project and your future plans here.",
+          header: RESH,
           navlist: [""],
         },
       ],
@@ -130,7 +132,7 @@ const Pages: (Page | Folder)[] = [
       title: "Safety",
       path: "/safety",
       component: Safety,
-      lead: "Describe all the safety issues of your project.",
+      header: SAFEH,
       navlist: [""],
     },
     {
@@ -138,8 +140,8 @@ const Pages: (Page | Folder)[] = [
       title: "Human Practices",
       path: "/human-practices",
       component: HumanPractices,
-      lead: "We ask every team to think deeply and creatively about whether their project is responsible and good for the world. Consider how the world affects your work and how your work affects the world.",
-      navlist: [""],
+      header: HPH,
+       navlist: [""],
     },
     /* {
       name: "Awards",
@@ -150,7 +152,7 @@ const Pages: (Page | Folder)[] = [
           title: "Sustainable Development Goals",
           path: "/sustainable",
           component: Sustainable,
-          lead: "Describe how you have evaluated your project ideas against one or more of the SDGs.",
+          header: "Describe how you have evaluated your project ideas against one or more of the SDGs.",
           navlist: [""],
         },
       ],
@@ -163,7 +165,7 @@ const Pages: (Page | Folder)[] = [
               title: "BFH European MeetUp",
               path: "/bfh",
               component: Bfh,
-              lead: "MeetUp",
+              header: BFHH,
               navlist: [],
             },
             {
@@ -171,7 +173,7 @@ const Pages: (Page | Folder)[] = [
               title: "wiki",
               path: "/wiki",
               component: Wiki,
-              lead: "Wiki",
+              header: WIKIH,
               navlist: [""],
             },
           ]

src/utils/getPathMapping.ts

@@ -6,7 +6,7 @@ export const getPathMapping = () => {
       name: string | undefined;
       title: string | undefined;
       component: React.FC;
-      lead: string | undefined;
+      header: React.FC;
       navlist: Array<string> | undefined;
     };
   }>((map, item) => {
@@ -15,7 +15,7 @@ export const getPathMapping = () => {
         name: item.name,
         title: item.title,
         component: item.component,
-        lead: item.lead,
+        header: item.header,
         navlist: item.navlist, 
       };
     } else if ("folder" in item && item.folder) {
@@ -25,7 +25,7 @@ export const getPathMapping = () => {
             name: page.name,
             title: page.title,
             component: page.component,
-            lead: page.lead,
+            header: page.header,
             navlist: page.navlist, 
           };
         }