Skip to content

Commit bd8da10

Browse files
gregnrgregnr
authored
Merge pull request supabase-community#6 from supabase-community/feat/preview-banner
feat: preview banner
2 parents 95d2715 + 7c6d586 commit bd8da10

File tree

3 files changed

+132
-119
lines changed

3 files changed

+132
-119
lines changed

‎apps/postgres-new/.env.example

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
NEXT_PUBLIC_SUPABASE_ANON_KEY="<supabase-anon-key>"
22
NEXT_PUBLIC_SUPABASE_URL="<supabase-api-url>"
3+
NEXT_PUBLIC_IS_PREVIEW=true
4+
35
OPENAI_API_KEY="<openai-api-key>"

‎apps/postgres-new/components/app-provider.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default function AppProvider({ children }: AppProps) {
7676
setUser(undefined)
7777
}, [supabase])
7878

79+
const isPreview = process.env.NEXT_PUBLIC_IS_PREVIEW === 'true'
7980
const pgliteVersion = process.env.NEXT_PUBLIC_PGLITE_VERSION
8081
const { value: pgVersion } = useAsyncMemo(() => getRuntimePgVersion(), [])
8182

@@ -86,6 +87,7 @@ export default function AppProvider({ children }: AppProps) {
8687
isLoadingUser,
8788
signIn,
8889
signOut,
90+
isPreview,
8991
pgliteVersion,
9092
pgVersion,
9193
}}
@@ -100,6 +102,7 @@ export type AppContextValues = {
100102
isLoadingUser: boolean
101103
signIn: () => Promise<User | undefined>
102104
signOut: () => Promise<void>
105+
isPreview: boolean
103106
pgliteVersion?: string
104107
pgVersion?: string
105108
}

‎apps/postgres-new/components/layout.tsx

Lines changed: 127 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -32,143 +32,151 @@ const loadFramerFeatures = () => import('./framer-features').then((res) => res.d
3232
export type LayoutProps = PropsWithChildren
3333

3434
export default function Layout({ children }: LayoutProps) {
35-
const { user, signOut, pgliteVersion, pgVersion } = useApp()
35+
const { user, signOut, isPreview, pgliteVersion, pgVersion } = useApp()
3636
let { id: currentDatabaseId } = useParams<{ id: string }>()
3737
const router = useRouter()
3838
const { data: databases, isLoading: isLoadingDatabases } = useDatabasesQuery()
3939
const [showSidebar, setShowSidebar] = useState(true)
4040

4141
return (
4242
<LazyMotion features={loadFramerFeatures}>
43-
<div className="w-full h-full flex flex-col lg:flex-row overflow-hidden">
44-
<AnimatePresence initial={false} mode="popLayout">
45-
{showSidebar && (
46-
<m.div
47-
className="max-w-72 w-full h-full flex flex-col gap-2 items-stretch p-4 bg-neutral-100 overflow-hidden"
48-
variants={{
49-
hidden: { opacity: 0, x: '-100%' },
50-
show: { opacity: 1, x: 0 },
51-
}}
52-
transition={{ duration: 0.25 }}
53-
initial="hidden"
54-
animate="show"
55-
exit={{ opacity: 0, transition: { duration: 0 } }}
56-
>
57-
<div className="flex justify-between text-neutral-500">
58-
<m.div layout="position" layoutId="sidebar-collapse">
59-
<Button
60-
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
61-
onClick={() => {
62-
setShowSidebar(false)
63-
}}
43+
<div className="w-full h-full flex flex-col overflow-hidden">
44+
{isPreview && (
45+
<div className="px-3 py-2 flex justify-center text-sm text-center bg-neutral-800 text-white">
46+
Heads up! This is a preview version of postgres.new, so expect some changes here and
47+
there.
48+
</div>
49+
)}
50+
<div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
51+
<AnimatePresence initial={false} mode="popLayout">
52+
{showSidebar && (
53+
<m.div
54+
className="max-w-72 w-full h-full flex flex-col gap-2 items-stretch p-4 bg-neutral-100 overflow-hidden"
55+
variants={{
56+
hidden: { opacity: 0, x: '-100%' },
57+
show: { opacity: 1, x: 0 },
58+
}}
59+
transition={{ duration: 0.25 }}
60+
initial="hidden"
61+
animate="show"
62+
exit={{ opacity: 0, transition: { duration: 0 } }}
63+
>
64+
<div className="flex justify-between text-neutral-500">
65+
<m.div layout="position" layoutId="sidebar-collapse">
66+
<Button
67+
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
68+
onClick={() => {
69+
setShowSidebar(false)
70+
}}
71+
>
72+
<ArrowLeftToLine />
73+
</Button>
74+
</m.div>
75+
<m.div layout="position" layoutId="new-database-button">
76+
<Button
77+
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
78+
onClick={() => {
79+
router.push('/')
80+
}}
81+
>
82+
<PackagePlus />
83+
</Button>
84+
</m.div>
85+
</div>
86+
{databases && databases.length > 0 ? (
87+
<m.div
88+
className="flex-1 flex flex-col items-stretch overflow-y-auto overflow-x-hidden"
89+
transition={{ staggerChildren: 0.03 }}
90+
initial="hidden"
91+
animate="show"
6492
>
65-
<ArrowLeftToLine />
66-
</Button>
67-
</m.div>
68-
<m.div layout="position" layoutId="new-database-button">
93+
{databases.map((database) => (
94+
<m.div
95+
key={database.id}
96+
layout="position"
97+
layoutId={`database-menu-item-${database.id}`}
98+
variants={{
99+
hidden: { opacity: 0, x: -20 },
100+
show: { opacity: 1, x: 0 },
101+
}}
102+
>
103+
<DatabaseMenuItem
104+
database={database}
105+
isActive={database.id === currentDatabaseId}
106+
/>
107+
</m.div>
108+
))}
109+
</m.div>
110+
) : (
111+
<div className="flex-1 flex flex-col gap-2 my-10 mx-5 items-center text-base text-neutral-400 opacity-75">
112+
{isLoadingDatabases ? (
113+
<Loader className="animate-spin" size={48} strokeWidth={0.75} />
114+
) : (
115+
<>
116+
<DbIcon size={48} strokeWidth={0.75} />
117+
<span>No databases</span>
118+
</>
119+
)}
120+
</div>
121+
)}
122+
123+
<div className="flex flex-col gap-2 text-xs text-lighter text-center justify-center">
124+
{pgliteVersion && (
125+
<span>
126+
<a
127+
className="underline"
128+
href="https://github.com/electric-sql/pglite"
129+
target="_blank"
130+
rel="noopener noreferrer"
131+
>
132+
PGlite
133+
</a>{' '}
134+
{pgliteVersion} {pgVersion && <>(PG {pgVersion})</>}
135+
</span>
136+
)}
137+
</div>
138+
{user && (
69139
<Button
70-
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
71-
onClick={() => {
72-
router.push('/')
140+
className="flex flex-row gap-2 items-center mx-2 hover:bg-black/10"
141+
onClick={async () => {
142+
await signOut()
73143
}}
74144
>
75-
<PackagePlus />
145+
<LogOut size={18} strokeWidth={2} />
146+
Sign out
76147
</Button>
77-
</m.div>
78-
</div>
79-
{databases && databases.length > 0 ? (
80-
<m.div
81-
className="flex-1 flex flex-col items-stretch overflow-y-auto overflow-x-hidden"
82-
transition={{ staggerChildren: 0.03 }}
83-
initial="hidden"
84-
animate="show"
85-
>
86-
{databases.map((database) => (
87-
<m.div
88-
key={database.id}
89-
layout="position"
90-
layoutId={`database-menu-item-${database.id}`}
91-
variants={{
92-
hidden: { opacity: 0, x: -20 },
93-
show: { opacity: 1, x: 0 },
94-
}}
95-
>
96-
<DatabaseMenuItem
97-
database={database}
98-
isActive={database.id === currentDatabaseId}
99-
/>
100-
</m.div>
101-
))}
102-
</m.div>
103-
) : (
104-
<div className="flex-1 flex flex-col gap-2 my-10 mx-5 items-center text-base text-neutral-400 opacity-75">
105-
{isLoadingDatabases ? (
106-
<Loader className="animate-spin" size={48} strokeWidth={0.75} />
107-
) : (
108-
<>
109-
<DbIcon size={48} strokeWidth={0.75} />
110-
<span>No databases</span>
111-
</>
112-
)}
113-
</div>
114-
)}
115-
116-
<div className="flex flex-col gap-2 text-xs text-lighter text-center justify-center">
117-
{pgliteVersion && (
118-
<span>
119-
<a
120-
className="underline"
121-
href="https://github.com/electric-sql/pglite"
122-
target="_blank"
123-
rel="noopener noreferrer"
124-
>
125-
PGlite
126-
</a>{' '}
127-
{pgliteVersion} {pgVersion && <>(PG {pgVersion})</>}
128-
</span>
129148
)}
130-
</div>
131-
{user && (
149+
</m.div>
150+
)}
151+
</AnimatePresence>
152+
{!showSidebar && (
153+
<div className="flex flex-col gap-2 pl-4 py-4 justify-start text-neutral-500">
154+
<m.div layoutId="sidebar-collapse">
132155
<Button
133-
className="flex flex-row gap-2 items-center mx-2 hover:bg-black/10"
134-
onClick={async () => {
135-
await signOut()
156+
className="bg-inherit justify-start hover:bg-neutral-200 text-sm flex gap-3"
157+
onClick={() => {
158+
setShowSidebar(true)
136159
}}
137160
>
138-
<LogOut size={18} strokeWidth={2} />
139-
Sign out
161+
<ArrowRightToLine />
140162
</Button>
141-
)}
142-
</m.div>
163+
</m.div>
164+
<m.div layoutId="new-database-button">
165+
<Button
166+
className="bg-inherit justify-end hover:bg-neutral-200 text-sm flex gap-3"
167+
onClick={() => {
168+
router.push('/')
169+
}}
170+
>
171+
<PackagePlus />
172+
</Button>
173+
</m.div>
174+
</div>
143175
)}
144-
</AnimatePresence>
145-
{!showSidebar && (
146-
<div className="flex flex-col gap-2 pl-4 py-4 justify-start text-neutral-500">
147-
<m.div layoutId="sidebar-collapse">
148-
<Button
149-
className="bg-inherit justify-start hover:bg-neutral-200 text-sm flex gap-3"
150-
onClick={() => {
151-
setShowSidebar(true)
152-
}}
153-
>
154-
<ArrowRightToLine />
155-
</Button>
156-
</m.div>
157-
<m.div layoutId="new-database-button">
158-
<Button
159-
className="bg-inherit justify-end hover:bg-neutral-200 text-sm flex gap-3"
160-
onClick={() => {
161-
router.push('/')
162-
}}
163-
>
164-
<PackagePlus />
165-
</Button>
166-
</m.div>
167-
</div>
168-
)}
169-
<m.div layout="position" className="w-full h-full">
170-
{children}
171-
</m.div>
176+
<m.div layout="position" className="w-full h-full">
177+
{children}
178+
</m.div>
179+
</div>
172180
</div>
173181
</LazyMotion>
174182
)

0 commit comments

Comments
 (0)