73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|