AUTHMODE BABAY

components/user/index.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @next/next/no-img-element */
+import { auth } from "@/auth";
+import { UserCircleIcon } from "@heroicons/react/24/solid";
+import { FC } from "react";
+import { UserMenu } from "./menu";
+
+export const User: FC = async () => {
+  const session = await auth();
+  return (
+    <UserMenu signedIn={!!session?.user}>
+      <div className="flex gap-2 items-center">
+        {session?.user?.image ? (
+          <img
+            src={session.user.image}
+            alt="user avatar"
+            className="rounded-full w-12"
+          />
+        ) : (
+          <span className="w-12 h-12 inline-block">
+            <UserCircleIcon className="w-full h-full" />
+          </span>
+        )}
+        {session?.user?.name ? (
+          <span>Hey there, {session.user.name}!</span>
+        ) : (
+          <a className="block flex-grow h-full" href="/sign-in">
+            Sign In
+          </a>
+        )}
+      </div>
+    </UserMenu>
+  );
+};

components/user/menu.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { signOutOfApp } from "@/actions/auth";
+import { FC, PropsWithChildren, useCallback, useState } from "react";
+
+export const UserMenu: FC<PropsWithChildren<{ signedIn: boolean }>> = ({
+  children,
+  signedIn,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [closing, setClosing] = useState(true);
+
+  const toggle = useCallback(() => {
+    setClosing((c) => !c);
+    setTimeout(
+      () => {
+        setVisible((v) => !v);
+      },
+      visible ? 100 : 0
+    );
+  }, [visible]);
+
+  return (
+    <div
+      onClick={signedIn ? toggle : undefined}
+      className="relative bg-mixed-200 p-2 rounded-lg cursor-pointer w-[220px]"
+    >
+      {visible && (
+        <div
+          data-closing={closing}
+          className="absolute bottom-full left-0 right-0 fade-menu"
+        >
+          <ul className="separated-list w-full">
+            <li>
+              <a className="block p-2" href="/profile">
+                Profile
+              </a>
+            </li>
+            <li>
+              <button className="p-2" onClick={() => signOutOfApp()}>
+                Sign Out
+              </button>
+            </li>
+          </ul>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};