1+ /** biome-ignore-all lint/nursery/useImageSize: wrong suggestion here*/
2+ /** biome-ignore-all lint/performance/noImgElement: i will go bankrupt with <Image> cost */
13"use client" ;
24
3- import { useAuthActions } from "@convex-dev/auth/react" ;
45import { CheckoutLink } from "@convex-dev/polar/react" ;
56import { api } from "@d0/backend/convex/_generated/api" ;
6- import { Button , buttonVariants } from "@d0/ui/button" ;
7+ import { authClient } from "@d0/backend/lib/auth-client" ;
8+ import { Button , buttonVariants } from "@d0/ui/components/ui/button" ;
79import {
810 DropdownMenu ,
911 DropdownMenuContent ,
1012 DropdownMenuItem ,
1113 DropdownMenuLabel ,
1214 DropdownMenuSeparator ,
1315 DropdownMenuTrigger ,
14- } from "@d0/ui/dropdown-menu" ;
15- import { Logo } from "@d0/ui/logo" ;
16+ } from "@d0/ui/components/ui/ dropdown-menu" ;
17+
1618import { cn } from "@d0/ui/utils" ;
1719import { type Preloaded , usePreloadedQuery } from "convex/react" ;
1820import {
@@ -27,7 +29,6 @@ import Image from "next/image";
2729import Link from "next/link" ;
2830import { usePathname , useRouter } from "next/navigation" ;
2931import { ThemeSwitcher } from "./theme-switcher" ;
30- import { authClient } from "@d0/backend/lib/auth-client" ;
3132
3233export function Navigation ( {
3334 preloadedUser,
@@ -36,11 +37,10 @@ export function Navigation({
3637 preloadedUser : Preloaded < typeof api . users . getUser > ;
3738 preloadedProducts : Preloaded < typeof api . subscriptions . listAllProducts > ;
3839} ) {
39-
4040 const signOut = async ( ) => {
41- await authClient . signOut ( )
42- }
43-
41+ await authClient . signOut ( ) ;
42+ } ;
43+
4444 const pathname = usePathname ( ) ;
4545 const router = useRouter ( ) ;
4646 const isDashboardPath = pathname === "/" ;
@@ -51,45 +51,45 @@ export function Navigation({
5151 const products = usePreloadedQuery ( preloadedProducts ) ;
5252
5353 const monthlyProProduct = products ?. find (
54- ( product ) => product . recurringInterval === "month" ,
54+ ( product ) => product . recurringInterval === "month"
5555 ) ;
5656 const yearlyProProduct = products ?. find (
57- ( product ) => product . recurringInterval === "year" ,
57+ ( product ) => product . recurringInterval === "year"
5858 ) ;
5959
6060 if ( ! user ) {
6161 return null ;
6262 }
6363
6464 return (
65- < nav className = "sticky top-0 z-50 flex w-full flex-col border-b border-border bg-card px-6" >
65+ < nav className = "sticky top-0 z-50 flex w-full flex-col border-border border-b bg-card px-6" >
6666 < div className = "mx-auto flex w-full max-w-screen-xl items-center justify-between py-3" >
6767 < div className = "flex h-10 items-center gap-2" >
68- < Link href = "/" className = "flex h-10 items-center gap-1" >
69- < Image src = "/logo.png" alt = "logo" width = { 50 } height = { 50 } />
68+ < Link className = "flex h-10 items-center gap-1" href = "/ ">
69+ < Image alt = "logo" height = { 50 } src = "/logo.svg" width = { 50 } />
7070 </ Link >
71- < Slash className = "h-6 w-6 -rotate-12 stroke-[1.5px] text-primary/10" />
71+ < Slash className = "-rotate-12 h-6 w-6 stroke-[1.5px] text-primary/10" />
7272 < DropdownMenu modal = { false } >
7373 < DropdownMenuTrigger asChild >
7474 < Button
75- variant = "ghost"
7675 className = "gap-2 px-2 data-[state=open]:bg-primary/5"
76+ variant = "ghost"
7777 >
7878 < div className = "flex items-center gap-2" >
7979 { user . avatarUrl ? (
8080 < img
81- className = "h-8 w-8 rounded-full object-cover"
8281 alt = { user . name ?? user . email }
82+ className = "h-8 w-8 rounded-full object-cover"
8383 src = { user . avatarUrl }
8484 />
8585 ) : (
86- < span className = "h-8 w-8 rounded-full bg-gradient-to-br from-lime-400 from-10% via-cyan-300 to-blue-500" />
86+ < span className = "h-8 w-8 rounded-full bg-gradient-to-br from-10% from-lime-400 via-cyan-300 to-blue-500" />
8787 ) }
8888
89- < p className = "text-sm font-medium text-primary/80" >
89+ < p className = "font-medium text-primary/80 text-sm " >
9090 { user ?. name || "" }
9191 </ p >
92- < span className = "flex h-5 items-center rounded-full bg-primary/10 px-2 text-xs font-medium text-primary/80" >
92+ < span className = "flex h-5 items-center rounded-full bg-primary/10 px-2 font-medium text-primary/80 text-xs " >
9393 Free
9494 </ span >
9595 </ div >
@@ -100,25 +100,25 @@ export function Navigation({
100100 </ Button >
101101 </ DropdownMenuTrigger >
102102 < DropdownMenuContent
103- sideOffset = { 8 }
104103 className = "min-w-56 bg-card p-2"
104+ sideOffset = { 8 }
105105 >
106- < DropdownMenuLabel className = "flex items-center text-xs font-normal text-primary/60" >
106+ < DropdownMenuLabel className = "flex items-center font-normal text-primary/60 text-xs " >
107107 Personal Account
108108 </ DropdownMenuLabel >
109109 < DropdownMenuItem className = "h-10 w-full cursor-pointer justify-between rounded-md bg-secondary px-2" >
110110 < div className = "flex items-center gap-2" >
111111 { user . avatarUrl ? (
112112 < img
113- className = "h-6 w-6 rounded-full object-cover"
114113 alt = { user . name ?? user . email }
114+ className = "h-6 w-6 rounded-full object-cover"
115115 src = { user . avatarUrl }
116116 />
117117 ) : (
118- < span className = "h-6 w-6 rounded-full bg-gradient-to-br from-lime-400 from-10% via-cyan-300 to-blue-500" />
118+ < span className = "h-6 w-6 rounded-full bg-gradient-to-br from-10% from-lime-400 via-cyan-300 to-blue-500" />
119119 ) }
120120
121- < p className = "text-sm font-medium text-primary/80" >
121+ < p className = "font-medium text-primary/80 text-sm " >
122122 { user . name || "" }
123123 </ p >
124124 </ div >
@@ -128,7 +128,7 @@ export function Navigation({
128128 < DropdownMenuSeparator className = "mx-0 my-2" />
129129 < DropdownMenuItem className = "p-0 focus:bg-transparent" >
130130 { monthlyProProduct && yearlyProProduct && (
131- < Button size = "sm" className = "w-full" asChild >
131+ < Button asChild className = "w-full" size = "sm" >
132132 < CheckoutLink
133133 polarApi = { api . subscriptions }
134134 productIds = { [ monthlyProProduct . id , yearlyProProduct . id ] }
@@ -144,77 +144,77 @@ export function Navigation({
144144
145145 < div className = "flex h-10 items-center gap-3" >
146146 < a
147- href = "https://github.com/get-convex/v1/tree/main/docs"
148147 className = { cn (
149- `${ buttonVariants ( { variant : "outline" , size : "sm" } ) } group hidden h-8 gap-2 rounded-full bg-transparent px-2 pr-2.5 md:flex` ,
148+ `${ buttonVariants ( { variant : "outline" , size : "sm" } ) } group hidden h-8 gap-2 rounded-full bg-transparent px-2 pr-2.5 md:flex`
150149 ) }
150+ href = "https://github.com/get-convex/v1/tree/main/docs"
151151 >
152152 < svg
153- xmlns = "http://www.w3.org/2000/svg"
154153 className = "h-5 w-5 text-primary"
155- viewBox = "0 0 24 24"
156154 fill = "currentColor"
155+ viewBox = "0 0 24 24"
156+ xmlns = "http://www.w3.org/2000/svg"
157157 >
158+ < title > title</ title >
158159 < path d = "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
159160 </ svg >
160- < span className = "text-sm text- primary/60 transition group-hover:text-primary group-focus:text-primary" >
161+ < span className = "text-primary/60 text-sm transition group-hover:text-primary group-focus:text-primary" >
161162 Documentation
162163 </ span >
163164 </ a >
164165 < DropdownMenu modal = { false } >
165166 < DropdownMenuTrigger asChild >
166- < Button variant = "ghost" className = "h-8 w-8 rounded-full" >
167+ < Button className = "h-8 w-8 rounded-full" variant = "ghost ">
167168 { user . avatarUrl ? (
168169 < img
169- className = "min-h-8 min-w-8 rounded-full object-cover"
170170 alt = { user . name ?? user . email }
171+ className = "min-h-8 min-w-8 rounded-full object-cover"
171172 src = { user . avatarUrl }
172173 />
173174 ) : (
174- < span className = "min-h-8 min-w-8 rounded-full bg-gradient-to-br from-lime-400 from-10% via-cyan-300 to-blue-500" />
175+ < span className = "min-h-8 min-w-8 rounded-full bg-gradient-to-br from-10% from-lime-400 via-cyan-300 to-blue-500" />
175176 ) }
176177 </ Button >
177178 </ DropdownMenuTrigger >
178179 < DropdownMenuContent
180+ className = "-right-4 fixed min-w-56 bg-card p-2"
179181 sideOffset = { 8 }
180- className = "fixed -right-4 min-w-56 bg-card p-2"
181182 >
182183 < DropdownMenuItem className = "group flex-col items-start focus:bg-transparent" >
183- < p className = "text-sm font-medium text-primary/80 group-hover:text-primary group-focus:text-primary" >
184+ < p className = "font-medium text-primary/80 text-sm group-hover:text-primary group-focus:text-primary" >
184185 { user ?. name || "" }
185186 </ p >
186- < p className = "text-sm text- primary/60" > { user ?. email } </ p >
187+ < p className = "text-primary/60 text-sm " > { user ?. email } </ p >
187188 </ DropdownMenuItem >
188189
189190 < DropdownMenuItem
190191 className = "group h-9 w-full cursor-pointer justify-between rounded-md px-2"
191192 onClick = { ( ) => router . push ( "/settings" ) }
192193 >
193- < span className = "text-sm text- primary/60 group-hover:text-primary group-focus:text-primary" >
194+ < span className = "text-primary/60 text-sm group-hover:text-primary group-focus:text-primary" >
194195 Settings
195196 </ span >
196197 < Settings className = "h-[18px] w-[18px] stroke-[1.5px] text-primary/60 group-hover:text-primary group-focus:text-primary" />
197198 </ DropdownMenuItem >
198199
199200 < DropdownMenuItem
200201 className = { cn (
201- "group flex h-9 justify-between rounded-md px-2 hover:bg-transparent" ,
202+ "group flex h-9 justify-between rounded-md px-2 hover:bg-transparent"
202203 ) }
203204 >
204- < span className = "w-full text-sm text- primary/60 group-hover:text-primary group-focus:text-primary" >
205+ < span className = "w-full text-primary/60 text-sm group-hover:text-primary group-focus:text-primary" >
205206 Theme
206207 </ span >
207208 < ThemeSwitcher />
208209 </ DropdownMenuItem >
209210
210-
211211 < DropdownMenuSeparator className = "mx-0 my-2" />
212212
213213 < DropdownMenuItem
214214 className = "group h-9 w-full cursor-pointer justify-between rounded-md px-2"
215215 onClick = { ( ) => signOut ( ) }
216216 >
217- < span className = "text-sm text- primary/60 group-hover:text-primary group-focus:text-primary" >
217+ < span className = "text-primary/60 text-sm group-hover:text-primary group-focus:text-primary" >
218218 Log Out
219219 </ span >
220220 < LogOut className = "h-[18px] w-[18px] stroke-[1.5px] text-primary/60 group-hover:text-primary group-focus:text-primary" />
@@ -228,44 +228,44 @@ export function Navigation({
228228 < div
229229 className = { cn (
230230 "flex h-12 items-center border-b-2" ,
231- isDashboardPath ? "border-primary" : "border-transparent" ,
231+ isDashboardPath ? "border-primary" : "border-transparent"
232232 ) }
233233 >
234234 < Link
235- href = "/"
236235 className = { cn (
237- `${ buttonVariants ( { variant : "ghost" , size : "sm" } ) } text-primary/80` ,
236+ `${ buttonVariants ( { variant : "ghost" , size : "sm" } ) } text-primary/80`
238237 ) }
238+ href = "/"
239239 >
240240 Dashboard
241241 </ Link >
242242 </ div >
243243 < div
244244 className = { cn (
245245 "flex h-12 items-center border-b-2" ,
246- isSettingsPath ? "border-primary" : "border-transparent" ,
246+ isSettingsPath ? "border-primary" : "border-transparent"
247247 ) }
248248 >
249249 < Link
250- href = "/settings"
251250 className = { cn (
252- `${ buttonVariants ( { variant : "ghost" , size : "sm" } ) } text-primary/80` ,
251+ `${ buttonVariants ( { variant : "ghost" , size : "sm" } ) } text-primary/80`
253252 ) }
253+ href = "/settings"
254254 >
255255 Settings
256256 </ Link >
257257 </ div >
258258 < div
259259 className = { cn (
260260 "flex h-12 items-center border-b-2" ,
261- isBillingPath ? "border-primary" : "border-transparent" ,
261+ isBillingPath ? "border-primary" : "border-transparent"
262262 ) }
263263 >
264264 < Link
265- href = "/settings/billing"
266265 className = { cn (
267- `${ buttonVariants ( { variant : "ghost" , size : "sm" } ) } text-primary/80` ,
266+ `${ buttonVariants ( { variant : "ghost" , size : "sm" } ) } text-primary/80`
268267 ) }
268+ href = "/settings/billing"
269269 >
270270 Billing
271271 </ Link >
0 commit comments