dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13432 from supabase/fs/lw7-countdown-banner

Browse Source 
Fs/lw7 countdown banner
This commit is contained in:
Francesco Sansalvadore authored and GitHub committed 2023-04-05 11:33:12 +02:00
2 parents 5a98dd8d3a 6f4ed6e030
commit 68cc6647c7
9 files changed
+148 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/www/components/LaunchWeek/Banners/CountdownBanner.tsx
+85
View File
@@ -0,0 +1,85 @@
import React from 'react'
import Link from 'next/link'
import Countdown from 'react-countdown'
import _announcement from '~/data/Announcement.json'
import { AnnouncementProps } from '../../Nav/Announcement'
import { useRouter } from 'next/router'
interface CountdownStepProps {
value: string | number
unit: string
}
const announcement = _announcement as AnnouncementProps
function CountdownStep({ value, unit }: CountdownStepProps) {
return (
<div className="rounded-md p-[1px] overflow-hidden bg-gradient-to-b from-[#FFFFFF50] to-[#FFFFFF00]">
<div className="py-1 px-2 rounded-md leading-4 flex items-center justify-center bg-gradient-to-b from-[#9E44EF40] to-[#DBB8BF40] backdrop-blur-md">
<span className="m-0">{value}</span>
<span>{unit}</span>
</div>
</div>
)
}
function CountdownBanner() {
const { pathname } = useRouter()
const isLaunchWeekPage = pathname === '/launch-week'
const isLaunchWeekSection = pathname.includes('launch-week')
const renderer = ({ days, hours, minutes, seconds, completed }: any) => {
if (completed) {
// Render a completed state
return (
<div className="w-full flex gap-3 md:gap-6 items-center justify-center">
<p>Supabase Launch Week 7</p>
<div>
<Link href="/launch-week">
<a className="bg-white text-xs px-1.5 md:px-2.5 py-1 rounded-full text-[#9E44EF] shadow-none hover:shadow-mg cursor-pointer">
Now live
</a>
</Link>
</div>
</div>
)
} else {
// Render countdown
return (
<div
className={[
'w-full flex gap-3 md:gap-6 items-center md:justify-center text-sm md:text-base',
isLaunchWeekSection && '!justify-center',
].join(' ')}
>
<p>
<span className="hidden md:inline">Supabase</span> Launch Week 7
</p>
<div className="flex gap-1 items-center">
<CountdownStep value={days} unit="d" /> :
<CountdownStep value={hours} unit="h" /> :
<CountdownStep value={minutes} unit="m" /> :
<CountdownStep value={seconds} unit="s" />
</div>
{!isLaunchWeekPage && (
<div className="hidden md:block">
<Link href="/launch-week">
<a className="bg-white text-xs px-1.5 md:px-2.5 py-1 rounded-full text-[#9E44EF] shadow-none hover:shadow-mg cursor-pointer">
Get your ticket
</a>
</Link>
</div>
)}
</div>
)
}
}
return (
<div className="w-full h-14 p-2 bg-gradient-to-r from-[#9E44EF] to-[#DBB8BF] bg-blue-300 flex items-center justify-center text-white">
<Countdown date={new Date(announcement.launchDate)} renderer={renderer} />
</div>
)
}
export default CountdownBanner
apps/www/components/Nav/Announcement.tsx
+28 -44
View File
@@ -1,26 +1,37 @@
import React, { useEffect, useState } from 'react'
import _announcement from '~/data/Announcement.json'
import { IconChevronRight, IconX } from 'ui'
import { IconX } from 'ui'
import { useRouter } from 'next/router'
import { PropsWithChildren } from 'react'
interface AnnouncementProps {
export interface AnnouncementProps {
show: boolean
text: string
cta: string
launchDate: string
link: string
badge?: string
}
const announcement = _announcement as AnnouncementProps
const Announcement = () => {
interface AnnouncementComponentProps {
show?: boolean
className?: string
}
const Announcement = ({
show = true,
className,
children,
}: PropsWithChildren<AnnouncementComponentProps>) => {
const [hidden, setHidden] = useState(true)
const router = useRouter()
const isLaunchWeekSection = router.pathname.includes('launch-week')
// override to hide announcement
if (!announcement.show) 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, '')
@@ -42,50 +53,23 @@ const Announcement = () => {
function handleLink() {
router.push(announcement.link)
window.localStorage.setItem(announcementKey, 'hidden')
}
if (hidden) {
// Always show if on LW section
if (!isLaunchWeekSection && hidden) {
return null
} else {
return (
<div
onClick={handleLink}
className="
launch-week-gradientBg--announcement-bar
to-green-1000
hover:from-green-1000
hover:to-green-1100 relative flex
cursor-pointer flex-row
space-x-3
overflow-hidden
text-white
"
>
<div
className="
mx-auto flex items-center gap-6 justify-center p-3 text-sm font-medium lg:container
lg:px-16 xl:px-20
"
>
<span>{announcement.text}</span>
<span className="item-center flex gap-2 pr-8 sm:px-3">
{announcement.badge && (
<div className="bg-[#2E2E2E] text-white py-0.25 rounded-2xl px-3 py-1 border border-gray-1100 whitespace-nowrap">
{announcement.badge}
</div>
)}
</span>
<span className="hidden items-center space-x-2 px-3 lg:flex">
<span>{announcement.cta}</span>
</span>
</div>
<div
className="absolute right-4 flex h-full items-center opacity-50 transition-opacity hover:opacity-100"
onClick={handleClose}
>
<IconX size={16} />
</div>
<div onClick={handleLink} className={['relative w-full cursor-pointer', className].join(' ')}>
{!isLaunchWeekSection && (
<div
className="absolute right-4 flex h-full items-center opacity-50 transition-opacity hover:opacity-100"
onClick={handleClose}
>
<IconX size={16} />
</div>
)}
{children}
</div>
)
}
apps/www/components/Nav/index.tsx
+5 -3
View File
@@ -17,6 +17,7 @@ import TextLink from '../TextLink'
import Image from 'next/image'
import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
import CountdownBanner from '../LaunchWeek/Banners/CountdownBanner'
const Nav = () => {
const { isDarkMode } = useTheme()
@@ -194,7 +195,9 @@ const Nav = () => {
return (
<>
{/* <Announcement /> */}
<Announcement>
<CountdownBanner />
</Announcement>
<div className="sticky top-0 z-50 transform" style={{ transform: 'translate3d(0,0,999px)' }}>
<div
className={[
@@ -206,7 +209,7 @@ const Nav = () => {
<nav
className={[
`border-scale-400 border-b backdrop-blur-sm transition-opacity`,
showLaunchWeekNavMode && '!opacity-100 border-[#e0d2f430]',
showLaunchWeekNavMode && '!opacity-100 !border-[#e0d2f430]',
].join(' ')}
>
{/* <div className="relative flex justify-between h-16 mx-auto lg:container lg:px-10 xl:px-0"> */}
@@ -331,7 +334,6 @@ const Nav = () => {
)}
</div>
</div>
{/* <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"></div> */}
</div>
{/* </div> */}
{/* Mobile Nav Menu */}
apps/www/data/Announcement.json
+4 -4
View File
@@ -1,7 +1,7 @@
{
"show": true,
"text": "Launch Week 6 begins December 12th",
"cta": "Don't miss a thing, get your free ticket",
"link": "https://supabase.com/launch-week",
"badge": "Get a reminder"
"text": "Supabase Launch Week 7",
"launchDate": "2023-04-10T07:00:00.000-07:00",
"link": "/launch-week",
"badge": "Get your ticket"
}
apps/www/package.json
+1
View File
@@ -41,6 +41,7 @@
"parse-numeric-range": "^1.3.0",
"react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.2",
"react-countdown": "^2.3.5",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-markdown": "^8.0.3",
apps/www/pages/launch-week/index.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ export default function TicketHome({ users }: Props) {
}}
/>
<DefaultLayout>
<div className="bg-[#1C1C1C] -mt-20">
<div className="bg-[#1C1C1C] -mt-[65px]">
<div className="relative bg-lw7 pt-20">
<div className="relative z-10">
<SectionContainer className="flex flex-col justify-around items-center !py-4 md:!py-8 gap-2 md:gap-4 !px-2 !mx-auto lg:h-[calc(80vh-65px)] min-h-[600px] lg:min-h-[650px]">
apps/www/pages/launch-week/tickets/[username].tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
}}
/>
<DefaultLayout>
<div className="bg-[#1C1C1C] -mt-20">
<div className="bg-[#1C1C1C] -mt-[65px]">
<div className="relative bg-lw7 pt-20">
<div className="relative z-10">
<SectionContainer className="flex flex-col justify-around items-center !py-4 md:!py-8 gap-2 md:gap-4 !px-2 !mx-auto xl:h-[calc(90vh-65px)] min-h-[600px] md:min-h-[auto] lg:min-h-[650px]">
apps/www/pages/launch-week/tickets/index.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export default function TicketsPage({ users }: Props) {
}}
/>
<DefaultLayout>
<div className="bg-[#1C1C1C] -mt-20">
<div className="bg-[#1C1C1C] -mt-[65px]">
<div className="relative bg-lw7 pt-20">
<div className="relative z-10">
<SectionContainer className="flex flex-col justify-around items-center !py-4 md:!py-8 gap-2 md:gap-4 !px-2 !mx-auto h-auto">
package-lock.json
Generated
+22
View File
@@ -682,6 +682,7 @@
"parse-numeric-range": "^1.3.0",
"react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.2",
"react-countdown": "^2.3.5",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-markdown": "^8.0.3",
@@ -31443,6 +31444,18 @@
"react": "^15.3.0 || 16 || 17 || 18"
}
},
"node_modules/react-countdown": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
"integrity": "sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">= 15",
"react-dom": ">= 15"
}
},
"node_modules/react-csv": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -63238,6 +63251,14 @@
"prop-types": "^15.8.1"
}
},
"react-countdown": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
"integrity": "sha512-K26ENYEesMfPxhRRtm1r+Pf70SErrvW3g4CArLi/x6MPFjgfDFYePT4UghEj8p2nI0cqVV7/JjDgjyr//U60Og==",
"requires": {
"prop-types": "^15.7.2"
}
},
"react-csv": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -69302,6 +69323,7 @@
"postcss-preset-env": "^6.7.0",
"react": "^17.0.2",
"react-copy-to-clipboard": "^5.0.2",
"react-countdown": "^2.3.5",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-markdown": "^8.0.3",