Merge pull request #71 from ScilifelabDataCentre/add-last-updated-com…

…ponent

Added last updated as a component in shadcn style

next-app/src/app/about/layout.tsx

@@ -1,7 +1,7 @@
 import { BODY_CLASSES } from "@/constants";
 import "../globals.css";
 import AboutPageComponent from "@/components/AboutPageComponent";
-
+import { LastUpdated } from "@/components/common/last-updated";
 
 export default function RootLayout({
   children,
@@ -10,8 +10,9 @@ export default function RootLayout({
 }>) {
   return (
     <div className={BODY_CLASSES}>
-        <AboutPageComponent />
-        {children}
+      <AboutPageComponent />
+      {children}
+      <LastUpdated date="11-11-2024" />
     </div>
   );
 }

next-app/src/app/accessclinicaldata/page.tsx

@@ -5,6 +5,7 @@ import { BODY_CLASSES } from "@/constants";
 import Link from "next/link";
 import { ILink } from "@/interfaces/types";
 import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
+import { LastUpdated } from "@/components/common/last-updated";
 
 export default function AboutPage(): ReactElement {
   TrackPageViewIfEnabled();
@@ -153,6 +154,7 @@ export default function AboutPage(): ReactElement {
           </a>
         </li>
       </ul>
+      <LastUpdated date="11-11-2024" />
     </div>
   );
 }

next-app/src/app/datasources/page.tsx

@@ -1,16 +1,18 @@
-'use client';
+"use client";
 
-import { ReactElement } from 'react';
-import { TrackPageViewIfEnabled } from '@/util/cookiesHandling';
-import DataSourcesComponent from '@/components/DataSourcesComponent';
-import { BODY_CLASSES } from '@/constants'
+import { ReactElement } from "react";
+import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
+import DataSourcesComponent from "@/components/DataSourcesComponent";
+import { BODY_CLASSES } from "@/constants";
+import { LastUpdated } from "@/components/common/last-updated";
 
 export default function DataPage(): ReactElement {
-    TrackPageViewIfEnabled();
+  TrackPageViewIfEnabled();
 
-    return (
-        <div className={BODY_CLASSES + " py-16"}>
-            <DataSourcesComponent />
-        </div>
-    );
-}
+  return (
+    <div className={BODY_CLASSES + " py-16"}>
+      <DataSourcesComponent />
+      <LastUpdated date="11-11-2024" />
+    </div>
+  );
+}

next-app/src/app/eventsandtrainings/page.tsx

@@ -6,6 +6,7 @@ import CardComponent from "@/components/CardComponent";
 import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
 import { BODY_CLASSES, H_1 } from "@/constants";
 import Link from "next/link";
+import { LastUpdated } from "@/components/common/last-updated";
 
 const nbisImage = "/Partner logo/nbislogo_orange_txt_3cb0778d90.svg";
 const scilifelabImage = "/Partner logo/SciLifeLab_Logotype_Green_POS.png";
@@ -225,6 +226,7 @@ export default function EventsAndTrainingsPage(): ReactElement {
           </div>
         ))}
       </div>
+      <LastUpdated date="11-11-2024" />
     </div>
   );
 }

next-app/src/app/ragnar/answer/page.tsx

@@ -1,15 +1,13 @@
 "use client";
 
 import { ReactElement } from "react";
-import { BODY_CLASSES } from "@/constants";
 import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
 import { ILink } from "@/interfaces/types";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
   Card,
-  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
@@ -18,8 +16,6 @@ import { Search, Terminal } from "lucide-react";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
-const RAGnarLogo = "/images/RAGnar.svg";
-
 export default function RAGAnswerPage(): ReactElement {
   TrackPageViewIfEnabled();
 
@@ -33,7 +29,7 @@ export default function RAGAnswerPage(): ReactElement {
       <div className="text-sm breadcrumbs">
         <ul>
           {Object.keys(breadcrumbs).map((key) => (
-            <li>
+            <li key={key}>
               {breadcrumbs[key].link ? (
                 <Link href={breadcrumbs[key].link}>
                   {breadcrumbs[key].text}

next-app/src/app/ragnar/ask/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ReactElement } from "react";
-import { BODY_CLASSES } from "@/constants";
 import { TrackPageViewIfEnabled } from "@/util/cookiesHandling";
 import { ILink } from "@/interfaces/types";
 import Link from "next/link";
@@ -10,8 +9,6 @@ import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { Search } from "lucide-react";
 
-const RAGnarLogo = "/images/RAGnar.svg";
-
 export default function RAGAskPage(): ReactElement {
   TrackPageViewIfEnabled();
 
@@ -25,7 +22,7 @@ export default function RAGAskPage(): ReactElement {
       <div className="text-sm breadcrumbs">
         <ul>
           {Object.keys(breadcrumbs).map((key) => (
-            <li>
+            <li key={key}>
               {breadcrumbs[key].link ? (
                 <Link href={breadcrumbs[key].link}>
                   {breadcrumbs[key].text}

next-app/src/app/registries/PageClient.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { RegistrySources, RegistrySourcesFilters } from "@/interfaces/types";
+import { LastUpdated } from "@/components/common/last-updated";
 
 const filters: RegistrySourcesFilters = {
   registryCentre: [
@@ -265,6 +266,7 @@ export default function DataPageClient({
           </div>
         </div>
       </div>
+      <LastUpdated date="11-11-2024" />
     </div>
   );
 }

next-app/src/components/common/last-updated.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface LastUpdatedProps extends React.HTMLAttributes<HTMLDivElement> {
+  date?: string;
+}
+
+const LastUpdated = React.forwardRef<HTMLDivElement, LastUpdatedProps>(
+  ({ className, date = "2024-10-09", ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "mt-auto py-4 text-center text-sm text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        Last updated on {date}
+      </div>
+    );
+  }
+);
+LastUpdated.displayName = "LastUpdated";
+
+export { LastUpdated };