Merge pull request #3 from ScilifelabDataCentre/header_branch

Header added + some organizing of code
ScilifelabDataCentre · Dec 21, 2023 · bf8ecee · bf8ecee
2 parents da752b0 + 1e42080
commit bf8ecee
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/react-app/public/images/scilifelogo.jpg b/react-app/public/images/scilifelogo.jpg
diff --git a/react-app/src/App.tsx b/react-app/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import FooterComponent from './components/FooterComponent';
+import HeaderComponent from './components/HeaderComponent';
 
 export default function App() {
   let body = (
@@ -9,6 +10,7 @@ export default function App() {
   )
   return (
     <html data-theme="light" className="min-h-screen bg-white">
+      {HeaderComponent()}
       {body}
       {FooterComponent()}
     </html>

diff --git a/react-app/src/components/FooterComponent.tsx b/react-app/src/components/FooterComponent.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function FooterComponent() {
   return (
     <footer className="footer p-10 bg-base-300 text-base-content fixed bottom-0">

diff --git a/react-app/src/components/HeaderComponent.tsx b/react-app/src/components/HeaderComponent.tsx
@@ -0,0 +1,39 @@
+import {ILink} from '../interfaces/types';
+
+export default function HeaderComponent() {
+    var links: { [id: string] : ILink; } = {
+        'l1': { text: 'Random text for now', classes: 'pointer-events-none', href: '/#' },
+        'l2': { text: 'Data', classes: 'link link-hover', href: '/#' },
+        'l3': { text: 'Events & News', classes: 'link link-hover', href: '/#' },
+        'l4': { text: 'Contact', classes: 'link link-hover', href: '/#' },
+        'l5': { text: 'About', classes: 'link link-hover', href: '/#' },
+    };
+
+    var buttons: { [id: string] : ILink; } = {
+        'b1': { text: 'Sign In', classes: 'btn bg-fuchsia-950 text-white', href: '/#' },
+    };
+
+    return (
+        // use bg-zinc-200 instead? similar to daisyUI light-theme footer
+        <div className="navbar h-[8rem] bg-black text-white">
+            <div className="navbar-start">
+                <a href="/">
+                    <img className="w-[340px] h-[82px] border border-black" src="/images/scilifelogo.jpg" alt="SciLifeLab Logo" />
+                </a>
+            </div>
+            <div className="navbar-center hidden lg:flex">
+                <ul className="menu menu-horizontal px-1">
+                {Object.keys(links).map( key => (
+                    <li>{<a className={links[key].classes} href={links[key].href}>{links[key].text}</a>}</li>
+                ))}
+                </ul>
+            </div>
+            {Object.keys(buttons).map( key => (
+                <div className="navbar-end">
+                    {<a className={buttons[key].classes} href={buttons[key].href}>{buttons[key].text}</a>}
+                </div>
+            ))}
+        </div>
+    )
+  }
+
diff --git a/react-app/src/interfaces/types.ts b/react-app/src/interfaces/types.ts
@@ -0,0 +1,5 @@
+export interface ILink {
+    text: string;
+    classes: string;
+    href: string;
+};