diff --git a/shared/components/Navigation_v2/PromotionBar.jsx b/shared/components/Navigation_v2/PromotionBar.jsx
new file mode 100644
index 00000000..8320649a
--- /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: 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 && (
+
+
+ {text}
+
+
+
+ )}
+ >
+ );
+};
+
+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 (
-
- {/* */}
-
- {/* */}
-
+ <>
+
+
+ {/* */}
+
+ {/* */}
+
+ >
);
};