Merge pull request #144 from QCDIS/142-add-credits-page

142 add credits page

vre-panel/components/Footer.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Link from "next/link";
+
+const Footer: React.FC = () => {
+
+  return (
+    <div className="flex flex-col w-full items-center mb-2">
+      <p className="text-xs text-gray-700">
+        Powered by NaaVRE / LifeWatch ERIC VLIC (
+          <Link
+            href="/about"
+            className="hover:underline"
+          >
+            About
+          </Link>
+        )
+      </p>
+    </div>
+  )
+}
+
+export default Footer

vre-panel/context/PaasConfig.tsx

@@ -19,7 +19,7 @@ export function PaasConfigProvider({children,}: { children: ReactNode }) {
     title: "Virtual Lab environments",
     description: "A collection of virtual lab environments",
     documentation_url: "https://github.com/QCDIS/NaaVRE/blob/main/README.md",
-    site_icon: `${publicRuntimeConfig.staticFolder}/LW_ERIC_Logo.png`,
+    site_icon: `${publicRuntimeConfig.staticFolder}/logo-lifewatch-eric-small.png`,
   })
   const [paasConfigLoading, setPaasConfigLoading] = useState(true)
 

vre-panel/pages/about.tsx

@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import getConfig from 'next/config'
+
+import {Nav} from '../templates/Nav';
+
+const About = ({}) => {
+
+  const { publicRuntimeConfig } = getConfig()
+
+  return (
+    <div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
+      <Nav/>
+      <div className="grow container mx-auto space-y-5 py-10">
+
+        <div className="max-w-full rounded shadow-lg bg-white p-8">
+          <h1 className="text-2xl text-gray-800 mb-8">
+            About NaaVRE
+          </h1>
+          <p className="text-base text-gray-800">
+            NaaVRE is built by LifeWatch ERIC VLIC and the QCDIS team at the University of Amsterdam.
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center mt-8">
+            <Link href="https://www.lifewatch.eu/">
+              <img
+                alt="LifeWatch ERIC logo"
+                src={`${publicRuntimeConfig.staticFolder}/logo-lifewatch-eric-medium.png`}
+                width="150"
+                className="m-10"
+              />
+            </Link>
+            <Link href="https://www.uva.nl/en">
+              <img
+                alt="University of Amsterdam logo"
+                src={`${publicRuntimeConfig.staticFolder}/logo-uva-medium.png`}
+                width="170"
+                className="m-10"
+              />
+            </Link>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+  )
+};
+
+export default About;

vre-panel/pages/index.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 
 import {NewVREDialog} from '../components/NewVREDialog';
 import {Nav} from '../templates/Nav';
+import Footer from '../components/Footer';
 import {PaasConfigContext} from '../context/PaasConfig';
 
 const getSlug = (title: string) => {
@@ -40,9 +41,9 @@ const VLabs = ({}) => {
   }, []);
 
   return (
-    <div className="min-h-screen mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
+    <div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
       <Nav/>
-      <div>
+      <div className="grow">
         <div className="container mx-auto space-y-10 py-10">
           <div className="max-w-full rounded shadow-lg bg-white p-8">
             <h1 className="text-2xl text-gray-800 mb-8">
@@ -128,6 +129,7 @@ const VLabs = ({}) => {
           <NewVREDialog isOpen={isOpen} setIsOpen={setIsOpen}/>
         </div>
       </div>
+      <Footer/>
     </div>
   )
 };

vre-panel/pages/vlabs/[slug].tsx

@@ -5,6 +5,7 @@ import { Nav } from "../../templates/Nav";
 import useAuth from "../auth/useAuth";
 import dynamic from "next/dynamic";
 import getConfig from 'next/config';
+import Footer from "../../components/Footer";
 
 const CatalogMapView = dynamic(() => import("../../components/catalog_map"), { ssr:false })
 
@@ -101,9 +102,9 @@ const VLabDetails: React.FC<VLabDetailsProps> = ({ token  }) => {
     }
 
     return (
-        <div className="min-h-screen mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
+        <div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
             <Nav />
-            <div>
+            <div className="grow">
                 <div className="container mx-auto py-10 grid grid-flow-row-dense grid-cols-4 grid-rows-5 gap-4">
                     <div className="row-span-2 col-span-2 shadow-lg bg-white p-10">
                         <p className="text-4xl font-sans">{vlab.title}</p>
@@ -199,6 +200,7 @@ const VLabDetails: React.FC<VLabDetailsProps> = ({ token  }) => {
 
                 </div>
             </div>
+            <Footer/>
         </div>
     )