feat: add account

next.config.js

@@ -2,6 +2,16 @@
 const nextConfig = {
   experimental: {
     appDir: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'img.clerk.com',
+        port: '',
+        pathname: '**',
+      },
+    ],
   }
 }
 

package.json

@@ -19,8 +19,10 @@
     "@hookform/resolvers": "^3.1.1",
     "@planetscale/database": "^1.11.0",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",

src/app/account/page.tsx

@@ -0,0 +1,22 @@
+import {auth} from "@clerk/nextjs";
+import {notFound} from "next/navigation";
+
+import SignOutButton from "@/components/account/signout-button";
+
+export default async function Page() {
+    const {userId} = auth();
+
+    if (!userId) return notFound();
+
+    return (
+        <div className={"w-full space-y-2"}>
+            <div className={"flex justify-between items-center"}>
+                <h1 className={"text-4xl font-bold"}>Account</h1>
+                <SignOutButton/>
+            </div>
+            <section>
+                This is where you will be able to set some user preferences
+            </section>
+        </div>
+    )
+}

src/components/account/signout-button.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import {useClerk} from "@clerk/nextjs";
+import {Button} from "@/components/ui/button";
+
+export default function SignOutButton() {
+    const clerk = useClerk();
+
+    return (
+        <Button
+            variant={"outline"}
+            onClick={async () => await clerk.signOut()}
+        >
+            Sign out
+        </Button>
+
+    )
+}

src/components/layout/header.tsx

@@ -1,6 +1,7 @@
+"use client"
 import Link from "next/link";
 import ThemeSwitcher from "@/components/theme-switcher";
-import {UserButton} from "@clerk/nextjs"
+import {Navigation} from "@/components/layout/navigation";
 
 // Header has z-20 because of progress bars
 
@@ -9,7 +10,7 @@ const Header = () => (
         <div className={"flex align-middle items-center justify-between p-4 w-full bg-background/95"}>
             <Link className={"text-xl md:text-2xl font-extrabold"} href={"/"}>beanstats</Link>
             <div className={"flex items-center gap-1"}>
-                <UserButton afterSignOutUrl="/"/>
+                <Navigation />
                 <ThemeSwitcher />
             </div>
         </div>

src/components/layout/navigation.tsx

@@ -0,0 +1,12 @@
+import {NavigationMenu, NavigationMenuList} from "@/components/ui/navigation-menu";
+import UserButtonMenuItem from "@/components/user/user-button";
+
+export function Navigation() {
+    return (
+        <NavigationMenu>
+            <NavigationMenuList>
+                <UserButtonMenuItem />
+            </NavigationMenuList>
+        </NavigationMenu>
+    )
+}

src/components/user/user-button.tsx

@@ -0,0 +1,34 @@
+"use client"
+import { UserButton as ClerkButton, useUser } from "@clerk/nextjs";
+import Link from "next/link";
+import {NavigationMenuItem, NavigationMenuLink, navigationMenuTriggerStyle} from "@/components/ui/navigation-menu";
+import {useClerkTheme} from "@/lib/hooks/clerk";
+
+export default function UserButtonMenuItem() {
+    const auth = useUser();
+    const clerkTheme = useClerkTheme();
+
+    if (!auth.isLoaded || !auth.isSignedIn) {
+        return (
+            <NavigationMenuItem>
+                <Link href="/account/sign-in" legacyBehavior passHref>
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                        {auth.isLoaded ? "Sign in" : "Account"}
+                    </NavigationMenuLink>
+                </Link>
+            </NavigationMenuItem>
+        )
+    }
+
+    return (
+        <NavigationMenuItem>
+            <Link href={"/account"} legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                    <ClerkButton afterSignOutUrl={"/"} appearance={{
+                        baseTheme: clerkTheme,
+                    }} />
+                </NavigationMenuLink>
+            </Link>
+        </NavigationMenuItem>
+    )
+}