mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
feat: select ‘25 banner (#38773)
* first push * select branding * banner data * fix: type errors
This commit is contained in:
Danny White authored and GitHub committed
1 parent
f2ba7f0270
commit
efd8f161cc
8 files changed
+52
-16
No files matched your search
@@ -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 (
|
||||
<>
|
||||
<AnnouncementBanner />
|
||||
<div
|
||||
className={cn('sticky top-0 z-40 transform', disableStickyNav && 'relative')}
|
||||
style={{ transform: 'translate3d(0,0,999px)' }}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="480" height="82" viewBox="0 0 480 82" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.5018 43.7982L15.2952 42.7923C8.49118 41.3724 2.92962 37.9408 2.92962 30.6634C2.92962 22.6761 11.272 18.5936 19.141 18.5936C27.6608 18.5936 34.2282 22.4394 35.944 31.3734H28.6666C27.4242 26.1668 22.9867 24.7469 18.7268 24.7469C15.4136 24.7469 10.5028 26.226 10.5028 30.4267C10.5028 33.74 13.1653 35.3967 16.8927 36.1066L22.1584 37.1125C29.6724 38.5324 36.8315 41.3724 36.8315 49.9514C36.8315 58.6487 28.2525 63.027 19.7918 63.027C9.55616 63.027 2.69296 57.5246 1.74631 48.0581H9.142C10.5028 53.9155 14.1711 56.8737 20.1468 56.8737C25.235 56.8737 29.3175 54.5663 29.3175 50.4247C29.3175 45.9873 24.5842 44.5673 20.5018 43.7982ZM60.0586 62.2578V57.8796C58.2244 61.1928 54.9703 63.027 50.6513 63.027C43.0781 63.027 40.0015 58.0571 40.0015 50.4839V30.4267H47.0422V48.7681C47.0422 53.028 47.6338 57.2879 52.8995 57.2879C58.1653 57.2879 60.0586 53.1463 60.0586 47.4073V30.4267H67.0993V62.2578H60.0586ZM79.9951 46.3423C79.9951 53.6788 83.545 57.2879 88.2191 57.2879C93.189 57.2879 96.0881 53.2055 96.0881 46.3423C96.0881 39.5382 93.189 35.4558 88.2191 35.4558C83.545 35.4558 79.9951 39.0058 79.9951 46.3423ZM73.2502 30.4267H80.2909V34.6867C82.1842 31.5509 85.4974 29.7168 89.7574 29.7168C97.5672 29.7168 103.425 36.225 103.425 46.3423C103.425 56.5779 97.5672 63.027 89.7574 63.027C85.4974 63.027 82.1842 61.1928 80.2909 58.0571V72.6118H73.2502V30.4267ZM126.827 49.7147V47.2889C116.828 48.2356 112.686 49.7147 112.686 53.3238C112.686 56.1046 114.994 57.7612 118.544 57.7612C123.75 57.7612 126.827 55.1579 126.827 49.7147ZM117.005 63.027C110.083 63.027 105.231 59.2995 105.231 53.5013C105.231 45.514 115.053 43.6207 126.649 42.3782V41.7865C126.649 36.3433 123.573 34.6867 120.023 34.6867C116.473 34.6867 113.81 36.58 113.633 40.4257H106.711C107.184 33.9767 112.568 29.4801 120.26 29.4801C127.892 29.4801 133.868 32.9709 133.69 43.1473C133.69 44.6856 133.572 48.4722 133.572 51.3714C133.572 55.3946 133.868 59.5954 134.518 62.2578H128.069C127.833 60.897 127.655 60.1279 127.478 57.9387C125.407 61.4295 121.739 63.027 117.005 63.027ZM145.78 46.3423C145.78 53.6788 149.33 57.2879 154.004 57.2879C158.737 57.2879 162.05 53.2055 162.05 46.3423C162.05 39.6566 158.737 35.4558 154.004 35.4558C149.33 35.4558 145.78 39.0058 145.78 46.3423ZM139.035 19.3628H146.076V34.6867C147.969 31.5509 151.282 29.7168 155.542 29.7168C163.115 29.7168 169.387 36.225 169.387 46.3423C169.387 56.5779 163.115 63.027 155.542 63.027C151.282 63.027 147.969 61.1928 146.076 58.0571V62.2578H139.035V19.3628ZM192.785 49.7147V47.2889C182.786 48.2356 178.644 49.7147 178.644 53.3238C178.644 56.1046 180.952 57.7612 184.502 57.7612C189.708 57.7612 192.785 55.1579 192.785 49.7147ZM182.963 63.027C176.041 63.027 171.189 59.2995 171.189 53.5013C171.189 45.514 181.011 43.6207 192.607 42.3782V41.7865C192.607 36.3433 189.531 34.6867 185.981 34.6867C182.431 34.6867 179.768 36.58 179.591 40.4257H172.669C173.142 33.9767 178.526 29.4801 186.218 29.4801C193.85 29.4801 199.826 32.9709 199.648 43.1473C199.648 44.6856 199.53 48.4722 199.53 51.3714C199.53 55.3946 199.826 59.5954 200.476 62.2578H194.027C193.791 60.897 193.613 60.1279 193.436 57.9387C191.365 61.4295 187.697 63.027 182.963 63.027ZM229.783 39.1241H223.157C222.388 36.225 219.725 35.1008 216.175 35.1008C213.099 35.1008 210.259 36.4616 210.259 38.5916C210.259 40.7216 211.738 41.8457 214.519 42.3782L219.015 43.2657C225.464 44.5082 230.375 46.5198 230.375 52.7322C230.375 59.3587 224.103 63.027 216.885 63.027C209.075 63.027 203.869 58.5304 203.1 52.5547H209.963C210.614 55.8679 212.921 57.7021 217.122 57.7021C220.849 57.7021 223.512 56.1638 223.512 53.5605C223.512 50.9572 221.145 49.833 218.009 49.1822L213.217 48.2356C207.833 47.1114 203.632 44.804 203.632 38.9466C203.632 33.3259 209.726 29.7168 216.589 29.7168C222.802 29.7168 228.482 32.7342 229.783 39.1241ZM263.404 48.3539H239.679C240.152 54.2705 244.294 57.1696 248.317 57.1696C252.044 57.1696 254.884 55.7496 256.127 52.7322H263.049C261.629 57.8204 256.778 63.027 248.613 63.027C238.377 63.027 232.52 55.2763 232.52 46.1056C232.52 36.5208 239.146 29.7168 248.139 29.7168C257.902 29.7168 264.055 37.7041 263.404 48.3539ZM248.139 35.2192C244.826 35.2192 240.329 37.2308 239.679 43.2065H256.245C256.068 38.2366 252.281 35.2192 248.139 35.2192ZM295.617 43.7982L290.41 42.7923C283.606 41.3724 278.045 37.9408 278.045 30.6634C278.045 22.6761 286.387 18.5936 294.256 18.5936C302.776 18.5936 309.343 22.4394 311.059 31.3734H303.782C302.539 26.1668 298.102 24.7469 293.842 24.7469C290.529 24.7469 285.618 26.226 285.618 30.4267C285.618 33.74 288.28 35.3967 292.008 36.1066L297.274 37.1125C304.788 38.5324 311.947 41.3724 311.947 49.9514C311.947 58.6487 303.368 63.027 294.907 63.027C284.671 63.027 277.808 57.5246 276.861 48.0581H284.257C285.618 53.9155 289.286 56.8737 295.262 56.8737C300.35 56.8737 304.433 54.5663 304.433 50.4247C304.433 45.9873 299.699 44.5673 295.617 43.7982ZM346.134 48.3539H322.409C322.882 54.2705 327.024 57.1696 331.047 57.1696C334.774 57.1696 337.614 55.7496 338.857 52.7322H345.779C344.359 57.8Line truncated
|
||||
<path d="M463.098 0.578125C463.848 -0.365996 465.368 0.152018 465.386 1.35742L465.447 10.5381L477.222 10.5381C479.369 10.5385 480.566 13.0187 479.231 14.7002L467.918 28.9473C467.169 29.891 465.649 29.374 465.631 28.1689L465.493 18.9873H453.795C451.648 18.987 450.451 16.5067 451.786 14.8252L463.098 0.578125Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
@@ -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 (
|
||||
<Announcement show={true} announcementKey="announcement_lw15_d2">
|
||||
<LW15Banner />
|
||||
<Announcement show={true} announcementKey="announcement_select_25_09">
|
||||
<SelectBanner />
|
||||
</Announcement>
|
||||
)
|
||||
}
|
||||
@@ -53,11 +53,11 @@ export function LW15Banner() {
|
||||
<div className="relative z-10 flex items-center justify-center">
|
||||
<div className="w-full flex gap-5 md:gap-10 items-center md:justify-center text-sm">
|
||||
<p className="flex gap-1.5 items-center font-mono uppercase tracking-widest text-sm">
|
||||
{announcement.text}
|
||||
{announcement.title}
|
||||
</p>
|
||||
<p className="text-sm hidden sm:block">{announcement.launch}</p>
|
||||
<p className="text-sm hidden sm:block">{announcement.desc}</p>
|
||||
<Button size="tiny" type="default" className="px-2 !leading-none text-xs" asChild>
|
||||
<Link href={announcement.link}>{announcement.cta}</Link>
|
||||
<Link href={announcement.link}>{announcement.button}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 (
|
||||
<div className="relative w-full p-4 flex items-center group justify-center text-foreground-contrast dark:text-white bg-black border-b border-muted transition-colors overflow-hidden ">
|
||||
<div className="relative z-10 flex items-center justify-center">
|
||||
<div className="w-full flex gap-5 md:gap-10 items-center md:justify-center text-sm">
|
||||
<Link target={announcement.target ?? '_self'} href={announcement.link}>
|
||||
<img src="/images/select/supabase-select.svg" alt="Supabase Select" className="w-32" />
|
||||
</Link>
|
||||
|
||||
<p className="text-sm hidden sm:block">
|
||||
{announcement.desc}
|
||||
<span className="hidden xl:inline">{announcement.verbose}</span>
|
||||
</p>
|
||||
|
||||
<Button size="tiny" type="default" className="px-2 !leading-none text-xs" asChild>
|
||||
<Link target={announcement.target ?? '_self'} href={announcement.link}>
|
||||
{announcement.button}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectBanner
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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`}
|
||||
/>
|
||||
<div className="relative z-10 text-foreground-lighter uppercase flex flex-col text-sm w-full mb-2">
|
||||
<span className="mb-1">{announcement.text}</span>
|
||||
<span className="mb-1">{announcement.title}</span>
|
||||
<p className="relative z-10 text-foreground flex flex-col text-xl w-full leading-7"></p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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 = ({
|
||||
<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-foreground transition-opacity hover:opacity-100"
|
||||
className="absolute z-50 right-4 flex h-full items-center opacity-100 text-foreground-contrast dark:text-foreground transition-opacity hover:opacity-100 hover:cursor-pointer"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<X size={16} />
|
||||
|
||||
Reference in new issue
Block a user