ipv4 banners (#20666)

add ipv4 deprecation banner in www

apps/docs/components/IPv4DeprecationBanner.tsx

@@ -5,9 +5,9 @@ import { Button, IconExternalLink, cn } from 'ui'
 
 export const IPv4DeprecationBanner = memo(() => {
   return (
-    <div className="flex items-center justify-center gap-x-4 bg-surface-100 p-3 transition text-foreground box-border border-b border-default">
+    <div className="flex items-center justify-center gap-x-4 bg-surface-100 p-2 transition text-foreground box-border border-b border-default">
       <p className="text-sm">
-        Prepare for the pgBouncer and IPv4 deprecations on 26th January 2024{' '}
+        Prepare for the PgBouncer and IPv4 deprecations on 26th January 2024{' '}
         <Link
           href="https://github.com/orgs/supabase/discussions/17817"
           target="_blank"

apps/studio/components/layouts/AppLayout/NoticeBanner.tsx

@@ -21,7 +21,9 @@ export const NoticeBanner = () => {
       className="flex items-center justify-center gap-x-4 bg-surface-100 py-3 transition text-foreground box-border border-b border-default"
       style={{ height: '44px' }}
     >
-      <p className="text-sm">PgBouncer and IPv4 will be deprecated after 26th January 2024</p>
+      <p className="text-sm">
+        Prepare for the PgBouncer and IPv4 deprecations on 26th January 2024
+      </p>
       <div className="flex items-center gap-x-1">
         <Button asChild type="link" iconRight={<IconExternalLink />}>
           <a

apps/www/components/Nav/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
 import { useWindowSize } from 'react-use'
 
-import { Button, cn } from 'ui'
+import { Announcement, Button, IPV4Banner, cn } from 'ui'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -72,9 +72,9 @@ const Nav = () => {
 
   return (
     <>
-      {/* <Announcement>
-        <LWXCountdownBanner />
-      </Announcement> */}
+      <Announcement dismissable={false} show>
+        <IPV4Banner />
+      </Announcement>
       <div
         className={cn('sticky top-0 z-40 transform', isLaunchWeekXPage && 'relative')}
         style={{ transform: 'translate3d(0,0,999px)' }}

packages/ui/src/layout/banners/Announcement.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import _announcement from './data/Announcement.json'
-import { IconX } from 'ui'
+import { IconX, cn } from 'ui'
 import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
@@ -17,22 +17,23 @@ const announcement = _announcement as AnnouncementProps
 
 interface AnnouncementComponentProps {
   show?: boolean
+  dismissable?: boolean
   className?: string
 }
 
 const Announcement = ({
   show = true,
+  dismissable = true,
   className,
   children,
 }: PropsWithChildren<AnnouncementComponentProps>) => {
-  const [hidden, setHidden] = useState(true)
+  const [hidden, setHidden] = useState(false)
 
   const router = useRouter()
-  const isHomePage = router.pathname === '/'
   const isLaunchWeekSection = router.pathname.includes('launch-week')
 
   // override to hide announcement
-  if (!show || !announcement.show || isHomePage || isLaunchWeekSection) return null
+  if (!show || !announcement.show) return null
 
   // construct the key for the announcement, based on the title text
   const announcementKey = 'announcement_' + announcement.text.replace(/ /g, '')
@@ -57,11 +58,8 @@ const Announcement = ({
     return null
   } else {
     return (
-      <div
-        onClick={() => window.location.assign(announcement.link)}
-        className={['relative z-40 h-[55px] w-full cursor-pointer', className].join(' ')}
-      >
-        {!isLaunchWeekSection && (
+      <div className={cn('relative z-40 w-full', className)}>
+        {dismissable && !isLaunchWeekSection && (
           <div
             className="absolute z-50 right-4 flex h-full items-center opacity-100 text-white transition-opacity hover:opacity-100"
             onClick={handleClose}

packages/ui/src/layout/banners/IPV4Banner/index.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react'
+import { IconExternalLink } from '../../../components/Icon/icons/IconExternalLink'
+import { Button } from '../../../components/Button'
+
+const index = memo(() => {
+  return (
+    <div className="relative w-full h-auto min-h-[44px] border-b p-2 flex items-center group justify-center text-foreground bg-surface-100 transition-colors overflow-hidden">
+      <div className="relative z-10 flex items-center justify-center">
+        <div className="w-full flex gap-4 items-center md:justify-center text-sm">
+          <div className="flex gap-2 items-center">
+            <p>Prepare for the PgBouncer and IPv4 deprecations on 26th January 2024</p>
+          </div>
+          <Button asChild type="link" iconRight={<IconExternalLink className="hidden sm:block" />}>
+            <a
+              href="https://github.com/orgs/supabase/discussions/17817"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Learn more
+            </a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export default index

packages/ui/src/layout/banners/index.tsx

@@ -1,3 +1,4 @@
 export { default as Announcement } from './Announcement'
 export { default as LW8CountdownBanner } from './LW8CountdownBanner/LW8CountdownBanner'
 export { default as LWXCountdownBanner } from './LWXCountdownBanner/LWXCountdownBanner'
+export { default as IPV4Banner } from './IPV4Banner'