Skip to content

Commit 0a5d6e8

Browse files
gregnrgregnr
authored
Merge pull request supabase-community#8 from supabase-community/feat/tooltips
feat: tooltips
2 parents e278e49 + 896c302 commit 0a5d6e8

File tree

4 files changed

+232
-113
lines changed

4 files changed

+232
-113
lines changed

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

Lines changed: 145 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { useParams, useRouter } from 'next/navigation'
2020
import { PropsWithChildren, useState } from 'react'
2121
import { Button } from '~/components/ui/button'
2222
import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
23+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui/tooltip'
2324
import { useDatabaseDeleteMutation } from '~/data/databases/database-delete-mutation'
2425
import { useDatabaseUpdateMutation } from '~/data/databases/database-update-mutation'
2526
import { useDatabasesQuery } from '~/data/databases/databases-query'
@@ -40,128 +41,159 @@ export default function Layout({ children }: LayoutProps) {
4041

4142
return (
4243
<LazyMotion features={loadFramerFeatures}>
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-
}}
44+
<TooltipProvider delayDuration={0}>
45+
<div className="w-full h-full flex flex-col overflow-hidden">
46+
{isPreview && (
47+
<div className="px-3 py-2 flex justify-center text-sm text-center bg-neutral-800 text-white">
48+
Heads up! This is a preview version of postgres.new, so expect some changes here and
49+
there.
50+
</div>
51+
)}
52+
<div className="flex-1 flex flex-col lg:flex-row">
53+
<AnimatePresence initial={false} mode="popLayout">
54+
{showSidebar && (
55+
<m.div
56+
className="max-w-72 w-full h-full flex flex-col gap-2 items-stretch p-4 bg-neutral-100"
57+
variants={{
58+
hidden: { opacity: 0, x: '-100%' },
59+
show: { opacity: 1, x: 0 },
60+
}}
61+
transition={{ duration: 0.25 }}
62+
initial="hidden"
63+
animate="show"
64+
exit={{ opacity: 0, transition: { duration: 0 } }}
65+
>
66+
<div className="flex justify-between text-neutral-500">
67+
<Tooltip>
68+
<TooltipTrigger asChild>
69+
<m.div layout="position" layoutId="sidebar-collapse">
70+
<Button
71+
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
72+
onClick={() => {
73+
setShowSidebar(false)
74+
}}
75+
>
76+
<ArrowLeftToLine />
77+
</Button>
78+
</m.div>
79+
</TooltipTrigger>
80+
<TooltipContent side="right" className="bg-black text-white">
81+
<p>Close sidebar</p>
82+
</TooltipContent>
83+
</Tooltip>
84+
<Tooltip>
85+
<TooltipTrigger asChild>
86+
<m.div layout="position" layoutId="new-database-button">
87+
<Button
88+
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
89+
onClick={() => {
90+
router.push('/')
91+
}}
92+
>
93+
<PackagePlus />
94+
</Button>
95+
</m.div>
96+
</TooltipTrigger>
97+
<TooltipContent side="bottom" className="bg-black text-white">
98+
<p>New database</p>
99+
</TooltipContent>
100+
</Tooltip>
101+
</div>
102+
{databases && databases.length > 0 ? (
103+
<m.div
104+
className="flex-1 flex flex-col items-stretch overflow-y-auto overflow-x-hidden"
105+
transition={{ staggerChildren: 0.03 }}
106+
initial="hidden"
107+
animate="show"
71108
>
72-
<ArrowLeftToLine />
73-
</Button>
74-
</m.div>
75-
<m.div layout="position" layoutId="new-database-button">
109+
{databases.map((database) => (
110+
<m.div
111+
key={database.id}
112+
layout="position"
113+
layoutId={`database-menu-item-${database.id}`}
114+
variants={{
115+
hidden: { opacity: 0, x: -20 },
116+
show: { opacity: 1, x: 0 },
117+
}}
118+
>
119+
<DatabaseMenuItem
120+
database={database}
121+
isActive={database.id === currentDatabaseId}
122+
/>
123+
</m.div>
124+
))}
125+
</m.div>
126+
) : (
127+
<div className="flex-1 flex flex-col gap-2 my-10 mx-5 items-center text-base text-neutral-400 opacity-75">
128+
{isLoadingDatabases ? (
129+
<Loader className="animate-spin" size={48} strokeWidth={0.75} />
130+
) : (
131+
<>
132+
<DbIcon size={48} strokeWidth={0.75} />
133+
<span>No databases</span>
134+
</>
135+
)}
136+
</div>
137+
)}
138+
{user && (
76139
<Button
77-
className="bg-inherit hover:bg-neutral-200 text-sm flex gap-3"
78-
onClick={() => {
79-
router.push('/')
140+
className="flex flex-row gap-2 items-center mx-2 hover:bg-black/10"
141+
onClick={async () => {
142+
await signOut()
80143
}}
81144
>
82-
<PackagePlus />
145+
<LogOut size={18} strokeWidth={2} />
146+
Sign out
83147
</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"
92-
>
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 },
148+
)}
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+
<Tooltip>
155+
<TooltipTrigger asChild>
156+
<m.div layoutId="sidebar-collapse">
157+
<Button
158+
className="bg-inherit justify-start hover:bg-neutral-200 text-sm flex gap-3"
159+
onClick={() => {
160+
setShowSidebar(true)
101161
}}
102162
>
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-
{user && (
123-
<Button
124-
className="flex flex-row gap-2 items-center mx-2 hover:bg-black/10"
125-
onClick={async () => {
126-
await signOut()
127-
}}
128-
>
129-
<LogOut size={18} strokeWidth={2} />
130-
Sign out
131-
</Button>
132-
)}
133-
</m.div>
163+
<ArrowRightToLine />
164+
</Button>
165+
</m.div>
166+
</TooltipTrigger>
167+
<TooltipContent side="right" className="bg-black text-white">
168+
<p>Open sidebar</p>
169+
</TooltipContent>
170+
</Tooltip>
171+
172+
<Tooltip>
173+
<TooltipTrigger asChild>
174+
<m.div layoutId="new-database-button">
175+
<Button
176+
className="bg-inherit justify-end hover:bg-neutral-200 text-sm flex gap-3"
177+
onClick={() => {
178+
router.push('/')
179+
}}
180+
>
181+
<PackagePlus />
182+
</Button>
183+
</m.div>
184+
</TooltipTrigger>
185+
<TooltipContent side="right" className="bg-black text-white">
186+
<p>New database</p>
187+
</TooltipContent>
188+
</Tooltip>
189+
</div>
134190
)}
135-
</AnimatePresence>
136-
{!showSidebar && (
137-
<div className="flex flex-col gap-2 pl-4 py-4 justify-start text-neutral-500">
138-
<m.div layoutId="sidebar-collapse">
139-
<Button
140-
className="bg-inherit justify-start hover:bg-neutral-200 text-sm flex gap-3"
141-
onClick={() => {
142-
setShowSidebar(true)
143-
}}
144-
>
145-
<ArrowRightToLine />
146-
</Button>
147-
</m.div>
148-
<m.div layoutId="new-database-button">
149-
<Button
150-
className="bg-inherit justify-end hover:bg-neutral-200 text-sm flex gap-3"
151-
onClick={() => {
152-
router.push('/')
153-
}}
154-
>
155-
<PackagePlus />
156-
</Button>
157-
</m.div>
158-
</div>
159-
)}
160-
<m.div layout="position" className="w-full h-full min-w-0">
161-
{children}
162-
</m.div>
191+
<m.div layout="position" className="w-full h-full min-w-0">
192+
{children}
193+
</m.div>
194+
</div>
163195
</div>
164-
</div>
196+
</TooltipProvider>
165197
</LazyMotion>
166198
)
167199
}

‎apps/postgres-new/components/ui/tooltip.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5+
6+
import { cn } from "~/lib/utils"
7+
8+
const TooltipProvider = TooltipPrimitive.Provider
9+
10+
const Tooltip = TooltipPrimitive.Root
11+
12+
const TooltipTrigger = TooltipPrimitive.Trigger
13+
14+
const TooltipContent = React.forwardRef<
15+
React.ElementRef<typeof TooltipPrimitive.Content>,
16+
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17+
>(({ className, sideOffset = 4, ...props }, ref) => (
18+
<TooltipPrimitive.Content
19+
ref={ref}
20+
sideOffset={sideOffset}
21+
className={cn(
22+
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23+
className
24+
)}
25+
{...props}
26+
/>
27+
))
28+
TooltipContent.displayName = TooltipPrimitive.Content.displayName
29+
30+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

‎apps/postgres-new/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@radix-ui/react-popover": "^1.1.1",
1919
"@radix-ui/react-slot": "^1.1.0",
2020
"@radix-ui/react-tabs": "^1.1.0",
21+
"@radix-ui/react-tooltip": "^1.1.2",
2122
"@supabase/postgres-meta": "^0.81.2",
2223
"@supabase/ssr": "^0.4.0",
2324
"@supabase/supabase-js": "^2.45.0",

‎package-lock.json

Lines changed: 56 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)