Merge pull request #21 from ScilifelabDataCentre/sebbe-pre-dev_branch

Combined work from pre-dev branch

react-app/src/App.tsx

@@ -1,45 +1,52 @@
 import React from 'react';
 import FooterComponent from './components/FooterComponent';
 import HeaderComponent from './components/HeaderComponent';
-import ArticleComponent from './components/ArticleComponent';
 import CardComponent from './components/CardComponent';
+import { useMatomo } from '@jonkoops/matomo-tracker-react'
+import TextBarComponent from './components/TextBarComponent';
+import ImageCarouselComponent from './components/ImageCarouselComponent';
 
 export default function App() {
-  let body = (
-      <h1 className="text-3xl text-black font-bold underline">
-        Under Construction
-      </h1>
-  )
+  const { trackPageView, trackEvent } = useMatomo()
+
+  // Track page view
+  React.useEffect(() => {
+    trackPageView()
+  }, [])
 
   var headerOne: string = "text-left text-black text-[40px] font-semibold";
   var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300";
-  var blackCardClasses: string = "w-[700px] h-[253px] bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2"
+  var blackCardClasses: string = "w-[700px] h-[253px] bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
+  var textBarClasses: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
+  var textBarContent: string = "UNDER CONSTRUCTION - Web portal by DDLS Data Science Node";
 
   return (
-    <div data-theme="dark" className="bg-white space-y-14">
-      {HeaderComponent()}
-      {body}
-      <div className="grid grid-cols-2 gap4">
-        <div className="flex flex-col space-y-1.5 ...">
-          <h1 className={headerOne}>Latest News</h1>
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+    <div data-theme="dark">
+      <HeaderComponent />
+      <TextBarComponent classes={textBarClasses} text={textBarContent} />
+      <div className="bg-white space-y-14">
+        <ImageCarouselComponent />
+        <div className="grid grid-cols-2 gap4">
+          <div className="flex flex-col space-y-1.5 ...">
+            <h1 className={headerOne}>Latest News</h1>
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          </div>
+          <div className="flex flex-col space-y-1.5 ...">
+            <h1 className={headerOne}>Upcoming Events</h1>
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+            <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          </div>
         </div>
-        <div className="flex flex-col space-y-1.5 ...">
-          <h1 className={headerOne}>Upcoming Events</h1>
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+        <div className="grid grid-cols-2">
+          <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
+          <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
         </div>
+        <FooterComponent />
       </div>
-      <div className="grid grid-cols-2">
-        <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
-        <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
-      </div>
-      {ArticleComponent()}
-      {FooterComponent()}
     </div>
   );
 }

react-app/src/components/FooterComponent.tsx

@@ -2,7 +2,7 @@ import {ILink, ISVG} from '../interfaces/types';
 
 export default function FooterComponent() {
 
-  var footerClasses: string = 'footer p-10 bg-base-300 text-base-content fixed bottom-0';
+  var footerClasses: string = 'footer p-10 bg-base-100 text-base-content';
 
   var linkClasses: string = 'link link-hover';
   var linksCol1: { [id: string] : ILink; } = {

react-app/src/components/ImageCarouselComponent.tsx

@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+
+export default function ImageCarouselComponent(): ReactElement {
+    return (
+        <div className="carousel carousel-center rounded-box py-10">
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg" alt="Pizza" />
+            </div> 
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg" alt="Pizza" />
+            </div> 
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg" alt="Pizza" />
+            </div> 
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg" alt="Pizza" />
+            </div> 
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg" alt="Pizza" />
+            </div> 
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg" alt="Pizza" />
+            </div> 
+            <div className="carousel-item">
+                <img src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg" alt="Pizza" />
+            </div>
+        </div>
+    );
+}

react-app/src/components/TextBarComponent.tsx

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+
+export default function TextBarComponent(prop: { classes: string, text: string }): ReactElement {
+    return (
+        <div className={prop.classes}>
+            <p>{prop.text}</p>
+        </div>
+    );
+};