docs(dashboard): 📝 Add 2.0 annoucement modal

apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx

@@ -0,0 +1,38 @@
+import { Flex, HStack, StackProps } from '@chakra-ui/layout'
+import { CloseButton } from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
+
+type VerifyEmailBannerProps = { id: string } & StackProps
+
+export const Banner = ({ id, ...props }: VerifyEmailBannerProps) => {
+  const [show, setShow] = useState(false)
+  const localStorageKey = `banner-${id}`
+
+  useEffect(() => {
+    if (!localStorage.getItem(localStorageKey)) setShow(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleCloseClick = () => {
+    localStorage.setItem(localStorageKey, 'hide')
+    setShow(false)
+  }
+
+  if (!show) return <></>
+  return (
+    <HStack
+      h="50px"
+      bgColor="blue.400"
+      color="white"
+      justifyContent="center"
+      align="center"
+      w="full"
+      {...props}
+    >
+      <Flex maxW="1000px" justifyContent="space-between" w="full">
+        <HStack>{props.children}</HStack>
+        <CloseButton rounded="full" onClick={handleCloseClick} />
+      </Flex>
+    </HStack>
+  )
+}