From b5c3c146f006f6c04b0fed0c289eda5c6fb0bb9b Mon Sep 17 00:00:00 2001
From: pepe1113 <epep8413@gmail.com>
Date: Sat, 23 Dec 2023 17:59:31 +0800
Subject: [PATCH 1/2] feat: add donate promotion

---
 .../components/Navigation_v2/PromotionBar.jsx | 74 +++++++++++++++++++
 shared/components/Navigation_v2/index.jsx     | 25 +++++--
 2 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 shared/components/Navigation_v2/PromotionBar.jsx

diff --git a/shared/components/Navigation_v2/PromotionBar.jsx b/shared/components/Navigation_v2/PromotionBar.jsx
new file mode 100644
index 00000000..72ae514a
--- /dev/null
+++ b/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: 7px;
+  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;
diff --git a/shared/components/Navigation_v2/index.jsx b/shared/components/Navigation_v2/index.jsx
index 5412a0cf..ba84470c 100644
--- a/shared/components/Navigation_v2/index.jsx
+++ b/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>
+    </>
   );
 };
 

From 0a3a720e242f573fa1ebcd1ab99bb488300810df Mon Sep 17 00:00:00 2001
From: pepe1113 <epep8413@gmail.com>
Date: Sun, 24 Dec 2023 00:40:36 +0800
Subject: [PATCH 2/2] feat: donate promotion

---
 shared/components/Navigation_v2/PromotionBar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/components/Navigation_v2/PromotionBar.jsx b/shared/components/Navigation_v2/PromotionBar.jsx
index 72ae514a..8320649a 100644
--- a/shared/components/Navigation_v2/PromotionBar.jsx
+++ b/shared/components/Navigation_v2/PromotionBar.jsx
@@ -16,7 +16,7 @@ const PromotionBarWrapper = styled.div`
 
 const CloseButton = styled.span`
   position: absolute;
-  top: 7px;
+  top: 9px;
   right: 7px;
   width: 20px;
   height: 20px;