Add closing button on banner

meilisearch · Jun 15, 2023 · 8e8b542 · 8e8b542
1 parent d7e9a36
commit 8e8b542
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 21 deletions.
diff --git a/src/App.js b/src/App.js
@@ -94,6 +94,7 @@ const App = () => {
   const [requireApiKeyToWork, setRequireApiKeyToWork] = React.useState(false)
   const [currentIndex, setCurrentIndex] = useLocalStorage('currentIndex')
   const [showCloudBanner, setShowCloudBanner] = React.useState(true)
+
   const [ISClient, setISClient] = React.useState(
     instantMeilisearch(baseUrl, apiKey, {
       primaryKey: 'id',

diff --git a/src/components/CloudBanner.js b/src/components/CloudBanner.js
@@ -3,37 +3,89 @@ import styled from 'styled-components'
 import Color from 'color'
 import Typography from 'components/Typography'
 import Link from 'components/Link'
+
+import IconButton from 'components/IconButton'
+import { Cross } from 'components/icons'
 import Container from './Container'
 
+const Button = styled(IconButton)`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  &:hover {
+    pointer-events: initial;
+  }
+`
+
 const CloudBannerWrapper = styled.div`
   background: linear-gradient(269.85deg, #ff1786 0%, #8e33de 100%);
   display: flex;
   position: sticky;
   top: 0;
-  height: auto;
+  height: 74px;
   box-shadow: 0px 0px 30px ${(p) => Color(p.theme.colors.gray[0]).alpha(0.15)};
   z-index: 3;
-  padding: 10px;
+  padding: 4px;
 `
 
-const CloudBanner = () => (
-  <CloudBannerWrapper>
-    <Container display="flex" flexDirection="column" alignContent="center">
-      <Typography variant="typo14" color="white">
-        Supercharge your Meilisearch experience
-      </Typography>
-
-      <Typography variant="typo15" color="white">
-        Say goodbye to server management, and manual updates with{' '}
-        <Link href="https://cloud.meilisearch.com" color="white">
-          <Typography variant="typo14" color="white">
-            Meilisearch cloud
-          </Typography>
-        </Link>
-        . No credit card required.
-      </Typography>
-    </Container>
-  </CloudBannerWrapper>
-)
+const CloudBanner = () => {
+  const [isBannerVisible, setIsBannerVisible] = React.useState(true)
+
+  const handleBannerClose = () => {
+    setIsBannerVisible(false)
+    localStorage.setItem('bannerVisibility', JSON.stringify(false))
+  }
+
+  // Retrieve the banner visibility state from local storage on component mount
+  React.useEffect(() => {
+    const storedVisibility = localStorage.getItem('bannerVisibility')
+    if (storedVisibility) {
+      setIsBannerVisible(JSON.parse(storedVisibility))
+    }
+
+    return () => {}
+  }, [])
+
+  return (
+    <>
+      {isBannerVisible && (
+        <CloudBannerWrapper>
+          <Container
+            display="flex"
+            flexDirection="column"
+            alignContent="center"
+          >
+            <Typography variant="typo14" color="white">
+              Supercharge your Meilisearch experience
+            </Typography>
+
+            <Typography variant="typo15" color="white">
+              Say goodbye to server management, and manual updates with{' '}
+              <Link
+                href="https://www.meilisearch.com/pricing?utm_campaign=oss&utm_source=integration&utm_medium=minidashboard"
+                color="white"
+              >
+                <Typography variant="typo14" color="white">
+                  Meilisearch Cloud
+                </Typography>
+              </Link>
+              .&nbsp;
+              <Typography variant="typo14" color="white">
+                No credit card required.
+              </Typography>
+            </Typography>
+            <Button
+              color="gray.9"
+              aria-label="close"
+              onClick={handleBannerClose}
+            >
+              <Cross style={{ width: 10 }} />
+            </Button>
+          </Container>
+        </CloudBannerWrapper>
+      )}
+    </>
+  )
+}
 
 export default CloudBanner