Merge pull request #21 from pepe1113/feature/donate_link

Add donate promotion bar

shared/components/Navigation_v2/PromotionBar.jsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+
+const PromotionBarWrapper = styled.div`
+  background-color: #f37b5f;
+  color: #fff;
+  padding: 7px;
+  text-align: center;
+  font-size: 16px;
+
+  a:hover {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+`;
+
+const CloseButton = styled.span`
+  position: absolute;
+  top: 9px;
+  right: 7px;
+  width: 20px;
+  height: 20px;
+  opacity: 0.3;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:before,
+  &:after {
+    position: absolute;
+    left: 10px;
+    content: ' ';
+    height: 20px;
+    width: 2px;
+    background-color: #333;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+  }
+`;
+
+const PromotionBar = ({ link, text }) => {
+  const [show, setShow] = useState(undefined);
+
+  useEffect(() => {
+    setShow(true);
+  }, []);
+
+  const handleClose = () => {
+    setShow(false);
+  };
+
+  return (
+    <>
+      {show && (
+        <PromotionBarWrapper>
+          <a href={link} target="_blank" rel="noreferrer">
+            {text}
+          </a>
+          <CloseButton onClick={handleClose} />
+        </PromotionBarWrapper>
+      )}
+    </>
+  );
+};
+
+export default PromotionBar;

shared/components/Navigation_v2/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { AppBar } from '@mui/material';
 import MainNav from './MainNav';
+import PromotionBar from './PromotionBar';
 
 const NavigationWrapper = styled(AppBar)`
   display: flex;
@@ -15,17 +16,31 @@ const NavigationWrapper = styled(AppBar)`
   }
 `;
 
+const donateTexts = [
+  '✨島島阿學需要你的支持，讓人人都享有同等資源✨',
+  '✨推廣民主教育，島島阿學需要你的支持✨',
+  '✨用捐款與島島阿學一同推動民主教育✨',
+];
+
+const buildRandomText = () => {
+  const randomIndex = Math.floor(Math.random() * donateTexts.length);
+  return donateTexts[randomIndex];
+};
+
 // const ToolbarWrapper = styled(Toolbar)`
 //   margin: 0 auto;
 // `;
 // 問卷 https://docs.google.com/forms/d/e/1FAIpQLSeyU9-Q-kIWp5uutcik3h-RO4o5VuG6oG0m-4u1Ua18EOu3aw/viewform
 const Navigation = () => {
   return (
-    <NavigationWrapper position="sticky">
-      {/* <Toolbar> */}
-      <MainNav />
-      {/* </Toolbar> */}
-    </NavigationWrapper>
+    <>
+      <PromotionBar link="https://ocf.tw/p/daodao/" text={buildRandomText()} />
+      <NavigationWrapper position="sticky">
+        {/* <Toolbar> */}
+        <MainNav />
+        {/* </Toolbar> */}
+      </NavigationWrapper>
+    </>
   );
 };