added banner (#484)

src/components/announcement-banner/AnnouncementBannerProvider.jsx

@@ -0,0 +1,93 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+import { useLocalStorage } from '@/hooks/useLocalStorage'
+
+const BANNER_ENABLED = true
+
+export const announcement = {
+  tag: '',
+  text: 'NetBird v0.60 Released - Native SSH Access',
+  link: 'https://netbird.io/knowledge-hub/native-identity-aware-ssh',
+  linkText: 'Read Release Article',
+  linkAlt: 'Learn more about the NetBird v0.60 release',
+  isExternal: false,
+  closeable: true,
+}
+
+const AnnouncementContext = createContext({
+  close: () => {},
+  isVisible: false,
+  bannerHeight: 0,
+  reportHeight: () => {},
+})
+
+export function AnnouncementBannerProvider({ children }) {
+  let [mounted, setMounted] = useState(false)
+  let [closedAnnouncement, setClosedAnnouncement] = useLocalStorage(
+    'netbird-announcement',
+    undefined
+  )
+  let announcementId = announcement.text
+  let [isHiddenByScroll, setIsHiddenByScroll] = useState(false)
+  let [bannerHeight, setBannerHeight] = useState(0)
+
+  let close = () => {
+    setClosedAnnouncement(announcementId)
+  }
+
+  let isActive = useMemo(() => {
+    if (!mounted) return false
+    if (!BANNER_ENABLED) return false
+    return closedAnnouncement !== announcementId
+  }, [announcementId, closedAnnouncement, mounted])
+
+  let isVisible = isActive && !isHiddenByScroll
+
+  let reportHeight = useCallback((height) => {
+    setBannerHeight(height)
+  }, [])
+
+  useEffect(() => {
+    setMounted(true)
+    return () => setMounted(false)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    function handleScroll() {
+      setIsHiddenByScroll(window.scrollY > 30)
+    }
+
+    handleScroll()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  useEffect(() => {
+    if (!isVisible && bannerHeight !== 0) {
+      setBannerHeight(0)
+    }
+  }, [bannerHeight, isVisible])
+
+  return (
+    <AnnouncementContext.Provider
+      value={{ close, isVisible, bannerHeight, reportHeight }}
+    >
+      {children}
+    </AnnouncementContext.Provider>
+  )
+}
+
+export function useAnnouncements() {
+  return useContext(AnnouncementContext)
+}