Implement next-auth v5

components/ui/user-menu.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+// import { type Session } from 'next-auth'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { signOut } from 'next-auth/react'
+
+import Image from 'next/image'
+
+export interface UserMenuProps {
+  session: any // Session
+}
+
+export function UserMenu({ session }: UserMenuProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <button className="focus:outline-none">
+            {session.user?.image ? (
+              <Image
+                width={24}
+                height={24}
+                className="w-6 h-6 transition-opacity duration-300 rounded-full select-none ring-zinc-100/10 ring-1 hover:opacity-80"
+                src={session.user?.image ? `${session.user.image}&s=60` : ''}
+                alt={session.user.name ?? 'Avatar'}
+              />
+            ) : (
+              <div className="flex items-center justify-center w-8 h-8 p-2 rounded-full select-none shrink-0 bg-gradient-to-r from-cyan-500 to-blue-500">
+                <div
+                  className="font-medium uppercase text-zinc-100"
+                  style={{ fontSize: 12 }}
+                >
+                  {session.user?.name ? session.user?.name.slice(0, 2) : null}
+                </div>
+              </div>
+            )}
+          </button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            className="min-w-[200px] bg-white dark:bg-zinc-950 rounded-lg shadow-lg text-zinc-900 dark:text-zinc-400 overflow-hidden border border-transparent dark:border-zinc-700 focus:outline-none relative z-20 py-2"
+            sideOffset={8}
+            align="end"
+          >
+            <DropdownMenu.Item className="px-3 py-2 focus:outline-none">
+              <div className="text-xs font-medium">{session.user?.name}</div>
+              <div className="text-xs text-zinc-500">{session.user?.email}</div>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Separator className="my-1 h-[1px] bg-zinc-100 dark:bg-zinc-800" />
+            <DropdownMenu.Item className="px-3 py-2 text-xs transition-colors duration-200 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 focus:outline-none ">
+              <a
+                href="https://vercel.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-between w-full"
+              >
+                <span>Vercel Homepage</span>
+                <span>
+                  <svg
+                    fill="none"
+                    height={16}
+                    shapeRendering="geometricPrecision"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
+                    viewBox="0 0 24 24"
+                    width={16}
+                    aria-hidden="true"
+                    className="mr-1"
+                  >
+                    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
+                    <path d="M15 3h6v6" />
+                    <path d="M10 14L21 3" />
+                  </svg>
+                </span>
+              </a>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className="px-3 py-2 text-xs transition-colors duration-200 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 focus:outline-none"
+              onClick={() => signOut()}
+            >
+              Log Out
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
+  )
+}
+
+UserMenu.displayName = 'UserMenu'