Add temporary banner at the top of page

US-GHG-Center · Jan 22, 2024 · 1887a2d · 1887a2d
1 parent ab859b9
commit 1887a2d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
@@ -1,9 +1,10 @@
-import React from "$veda-ui/react";
+import React, { useState } from "$veda-ui/react";
 import { NavLink } from "$veda-ui/react-router-dom";
 import styled from "$veda-ui/styled-components";
 import { glsp, themeVal, media } from "$veda-ui/@devseed-ui/theme-provider";
 import { Button } from "$veda-ui/@devseed-ui/button";
-import { CollecticonArrowRight } from "$veda-ui/@devseed-ui/collecticons";
+import { getString } from 'veda';
+import { CollecticonArrowRight, CollecticonXmarkSmall } from "$veda-ui/@devseed-ui/collecticons";
 import Hug from "$veda-ui-scripts/styles/hug";
 import { VarHeading } from "$veda-ui-scripts/styles/variable-components";
 import { variableGlsp } from "$veda-ui-scripts/styles/variable-utils";
@@ -85,9 +86,38 @@ const InfoCalloutHeadline = styled.div`
   }
 `;
 
+
 export default function HomeComponent() {
+  function showBanner() {
+    return !document.cookie.split('; ').filter(row => row.startsWith('showBanner=')).map(c=>c.split('=')[1])[0];
+  }
+
+  const [ showTempBanner, setShowTempBanner ] = useState(showBanner());
   return (
-    <>
+    <> {
+      (showTempBanner && getString('tempBanner')?.other) &&
+        <div style={{
+          position: "absolute",
+          top: "4px",
+          left: "15%",
+          backgroundColor: "#D0545E",
+          textAlign: "center",
+          fontSize: "14px",
+          color: "white",
+          zIndex: 1000,
+          display: 'flex',
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "2px 10px",
+          borderRadius: "5px",
+          cursor: "pointer"
+        }}>
+          <a href={ getString('tempBannerUrl')?.other || "" } target="_blank" style={{ color: "inherit" }}> <b>{ getString('tempBanner').other }</b></a>
+          <Button variation='base-text' onClick={() => { setShowTempBanner(false); document.cookie = `showBanner=false`; }}>
+            <CollecticonXmarkSmall color="white"/>
+          </Button>
+        </div>
+      }
       <HomeContent>
         <IntroHeadline>
           <VarHeading size="xxlarge">Welcome</VarHeading>

diff --git a/veda.config.js b/veda.config.js
@@ -41,6 +41,10 @@ module.exports = {
         "Explore the guided narratives below to learn more about greenhouse gas measurement, changes over time, events and human-related causes and contributions.",
     dataCatalogBanner:
         "This dashboard is for exploring key datasets that provide insight into greenhouse gas sources, sinks, emissions, fluxes, and events.",
+    tempBanner:
+        "Attending AMS Annual Meeting in Baltimore?  Join the GHG Center / VEDA workshop and learn about Greenhouse Gases using Open Source data and tools. Register Here!",
+    tempBannerUrl:
+        "https://annual.ametsoc.org/index.cfm/2024/registration/short-course-registration/"
   },
 
   theme: {