added docs and fixed level bridger

web/components/UserProfile.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { LogOut, User, ChevronDown } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+interface UserProfileProps {
+    user?: {
+        name?: string | null;
+        email?: string | null;
+        image?: string | null;
+    };
+}
+
+export default function UserProfile({ user }: UserProfileProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown on click outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    return (
+        <div className="relative pointer-events-auto" ref={dropdownRef}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="flex items-center gap-2 sm:gap-3 bg-white/5 px-2 sm:px-4 py-2 rounded-full border border-white/10 backdrop-blur-md hover:bg-white/10 transition-colors group"
+            >
+                <div className="text-right hidden sm:block">
+                    <p className="text-sm font-semibold text-white group-hover:text-blue-200 transition-colors">
+                        {user?.name || "User"}
+                    </p>
+                </div>
+                {user?.image ? (
+                    <img
+                        src={user.image}
+                        alt={user.name || "User"}
+                        className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50 group-hover:border-blue-400 transition-colors"
+                    />
+                ) : (
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50 bg-gray-700 flex items-center justify-center">
+                        <User className="w-5 h-5 text-gray-400" />
+                    </div>
+                )}
+                <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`} />
+            </button>
+
+            {isOpen && (
+                <div className="absolute right-0 top-full mt-2 w-48 bg-zinc-900 border border-white/10 rounded-xl shadow-xl overflow-hidden z-50 py-1 animate-in fade-in zoom-in-95 duration-100 ease-out">
+                    <div className="px-4 py-3 border-b border-white/10 sm:hidden">
+                        <p className="text-sm font-semibold text-white truncate">{user?.name || "User"}</p>
+                    </div>
+
+                    <button
+                        onClick={() => signOut({ callbackUrl: "/" })}
+                        className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-400 hover:bg-white/5 hover:text-red-300 transition-colors"
+                    >
+                        <LogOut className="w-4 h-4" />
+                        Log Out
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}