commit 28448c5195d1af7def227719db7f25b902fc2bc3
author labbomb <739955946@qq.com> Sun Apr 03 21:49:01 2022 +0800
committer GitHub <noreply@github.com> Sun Apr 03 21:49:01 2022 +0800
tree fa96dbfdc781f0f32ac7586b5ce81564e10620ad
parent 519841d5394dd962255680b8a8c5117a2ee798b0

Added banner Prompt (#762)

src/components/header/index.jsx

diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index 2cf01ff..993ea36 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -54,6 +54,7 @@
       language: props.language,
       search: siteConfig.defaultSearch,
       searchValue: '',
+      showBanner: true
     };
   }
 
@@ -149,9 +150,14 @@
     });
   }
 
+  handleBannerClose = () => {
+    this.state.showBanner = false
+    this.setState({...this.state})
+  }
+
   render() {
     const { type, logo, onLanguageChange } = this.props;
-    const { mobileMemuVisible, language, search, searchVisible } = this.state;
+    const { mobileMemuVisible, language, search, searchVisible, showBanner } = this.state;
     return (
       <header
         className={
@@ -161,6 +167,17 @@
           })
         }
       >
+        {
+          showBanner ?
+          <div className="banner-tips">
+            <div>
+              {siteConfig[language].banner.text}
+              <a className="link-tips" href={siteConfig[language].banner.link}>join #dolphinscheduler channel</a>
+              ! 🌟
+            </div>
+            {/* <div className="banner-close" onClick={this.handleBannerClose}></div> */}
+          </div> : null
+        }
         <div className="header-body">
           <span
             className={classnames({

src/components/header/index.scss

diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index 49d3b16..be06920 100644
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -105,6 +105,35 @@
     background-color: #fff;
     box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
   }
+  .banner-tips {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: red;
+    width: 100%;
+    z-index: 1000;
+    color: #fff;
+    font-family: monospace;
+    font-size: 12px;
+    padding: 6px;
+    box-sizing: border-box;
+    .link-tips {
+      color: #fff;
+      text-decoration: underline;
+    }
+    .banner-close {
+      display: flex;
+      position: absolute;
+      right: 0;
+      color: white;
+      width: 24px;
+      font-size: 12px;
+      cursor: pointer;
+      &::before {
+        content: "\2716";
+      }
+    }
+  }
   .header-body {
     max-width: $contentWidth;
     margin: 0 auto;