From efd8f161ccd72a232b191607bc6bea4ca477c587 Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Wed, 17 Sep 2025 18:31:13 +1000 Subject: [PATCH] =?UTF-8?q?feat:=20select=20=E2=80=9825=20banner=20(#38773?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * first push * select branding * banner data * fix: type errors --- apps/www/components/Nav/index.tsx | 3 +- .../public/images/select/supabase-select.svg | 4 +++ .../src/Banners/AnnouncementBanner.tsx | 6 ++-- .../ui-patterns/src/Banners/LW15Banner.tsx | 6 ++-- .../ui-patterns/src/Banners/SelectBanner.tsx | 30 +++++++++++++++++++ packages/ui-patterns/src/Banners/data.json | 11 +++---- .../ui-patterns/src/PromoToast/PromoToast.tsx | 2 +- .../ui/src/layout/banners/Announcement.tsx | 6 ++-- 8 files changed, 52 insertions(+), 16 deletions(-) create mode 100644 apps/www/public/images/select/supabase-select.svg create mode 100644 packages/ui-patterns/src/Banners/SelectBanner.tsx diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index a849373312..7e631d3717 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -7,7 +7,7 @@ import { useWindowSize } from 'react-use' import { useIsLoggedIn, useUser } from 'common' import { Button, buttonVariants, cn } from 'ui' -import { AuthenticatedDropdownMenu } from 'ui-patterns' +import { AnnouncementBanner, AuthenticatedDropdownMenu } from 'ui-patterns' import { useSendTelemetryEvent } from 'lib/telemetry' import GitHubButton from './GitHubButton' @@ -88,6 +88,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => { return ( <> +
+ + + diff --git a/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx b/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx index fdee27fac0..73795aeaf7 100644 --- a/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx +++ b/packages/ui-patterns/src/Banners/AnnouncementBanner.tsx @@ -1,13 +1,13 @@ import { Announcement } from 'ui/src/layout/banners' -import LW15Banner from './LW15Banner' +import SelectBanner from './SelectBanner' import announcementJSON from './data.json' export const announcement = announcementJSON export const AnnouncementBanner = () => { return ( - - + + ) } diff --git a/packages/ui-patterns/src/Banners/LW15Banner.tsx b/packages/ui-patterns/src/Banners/LW15Banner.tsx index 8e87d463eb..84268c24c4 100644 --- a/packages/ui-patterns/src/Banners/LW15Banner.tsx +++ b/packages/ui-patterns/src/Banners/LW15Banner.tsx @@ -53,11 +53,11 @@ export function LW15Banner() {

- {announcement.text} + {announcement.title}

-

{announcement.launch}

+

{announcement.desc}

diff --git a/packages/ui-patterns/src/Banners/SelectBanner.tsx b/packages/ui-patterns/src/Banners/SelectBanner.tsx new file mode 100644 index 0000000000..32afcf9192 --- /dev/null +++ b/packages/ui-patterns/src/Banners/SelectBanner.tsx @@ -0,0 +1,30 @@ +import Link from 'next/link' +import { Button } from 'ui/src/components/Button' +import announcement from './data.json' + +export function SelectBanner() { + return ( +
+
+
+ + Supabase Select + + +

+ {announcement.desc} + {announcement.verbose} +

+ + +
+
+
+ ) +} + +export default SelectBanner diff --git a/packages/ui-patterns/src/Banners/data.json b/packages/ui-patterns/src/Banners/data.json index a7f1e2fee1..bd3f41eb0f 100644 --- a/packages/ui-patterns/src/Banners/data.json +++ b/packages/ui-patterns/src/Banners/data.json @@ -1,7 +1,8 @@ { - "text": "", - "launch": "", - "launchDate": "2025-07-17T08:00:00.000-07:00", - "link": "#", - "cta": "Learn more" + "title": "Supabase Select", + "desc": "Our first user conference · October 3, San Francisco", + "verbose": " · Guillermo Rauch, Dylan Field, and more", + "link": "https://select.supabase.com/", + "target": "_blank", + "button": "Save your seat" } diff --git a/packages/ui-patterns/src/PromoToast/PromoToast.tsx b/packages/ui-patterns/src/PromoToast/PromoToast.tsx index af51c5e351..6c7c49049d 100644 --- a/packages/ui-patterns/src/PromoToast/PromoToast.tsx +++ b/packages/ui-patterns/src/PromoToast/PromoToast.tsx @@ -46,7 +46,7 @@ const PromoToast = () => { poster={`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/images/launch-week/lw15/assets/lw15-galaxy.png`} />
- {announcement.text} + {announcement.title}

diff --git a/packages/ui/src/layout/banners/Announcement.tsx b/packages/ui/src/layout/banners/Announcement.tsx index 364280e505..60dc358c34 100644 --- a/packages/ui/src/layout/banners/Announcement.tsx +++ b/packages/ui/src/layout/banners/Announcement.tsx @@ -9,8 +9,8 @@ import { X } from 'lucide-react' export interface AnnouncementProps { show: boolean - text: string - launchDate: string + title: string + launchDate: string | null link: string badge?: string } @@ -66,7 +66,7 @@ const Announcement = ({
{dismissable && !isLaunchWeekSection && (