107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
import { useState, useRef, useEffect } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { User, Settings, ShoppingBag, DollarSign, LogOut } from "lucide-react";
|
|
|
|
const UserDropdown = ({ onLogout, userName }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const dropdownRef = useRef(null);
|
|
const navigate = useNavigate();
|
|
|
|
// Use passed userName or fallback to default
|
|
const displayName = userName || "User";
|
|
|
|
const toggleDropdown = () => {
|
|
setIsOpen(!isOpen);
|
|
};
|
|
|
|
// Close dropdown when clicking outside
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
// Close the dropdown
|
|
setIsOpen(false);
|
|
|
|
// Call the onLogout function from props
|
|
if (onLogout) {
|
|
onLogout();
|
|
console.log("Logout successful");
|
|
}
|
|
|
|
// Navigate to login page (this may be redundant as App.jsx should handle redirection)
|
|
navigate("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="relative" ref={dropdownRef}>
|
|
<button
|
|
className="flex items-center focus:outline-none"
|
|
onClick={toggleDropdown}
|
|
>
|
|
<div className="h-8 w-8 rounded-full bg-emerald-100 flex items-center justify-center">
|
|
<User className="h-5 w-5 text-emerald-600" />
|
|
</div>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute right-0 mt-2 w-48 bg-white border border-gray-200 shadow-md z-10">
|
|
{/* User Info */}
|
|
<div className="px-4 py-3 border-b border-gray-100">
|
|
<p className="text-sm font-medium text-gray-900">{displayName}</p>
|
|
</div>
|
|
|
|
{/* Navigation Links */}
|
|
<div className="py-1">
|
|
<Link
|
|
to="/selling"
|
|
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<ShoppingBag className="h-4 w-4 mr-2 text-gray-500" />
|
|
My Listings
|
|
</Link>
|
|
|
|
<Link
|
|
to="/transactions"
|
|
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<DollarSign className="h-4 w-4 mr-2 text-gray-500" />
|
|
Transactions
|
|
</Link>
|
|
|
|
<Link
|
|
to="/settings"
|
|
className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<Settings className="h-4 w-4 mr-2 text-gray-500" />
|
|
Settings
|
|
</Link>
|
|
|
|
<button
|
|
className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut className="h-4 w-4 mr-2 text-gray-500" />
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserDropdown;
|