133 lines
4.5 KiB
TypeScript
133 lines
4.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { User, Settings, LogOut, Code2, Shield, Crown } from 'lucide-react';
|
|
|
|
export function UserMenu() {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/');
|
|
setIsOpen(false);
|
|
};
|
|
|
|
const toggleMenu = () => {
|
|
setIsOpen(!isOpen);
|
|
};
|
|
|
|
const closeMenu = () => {
|
|
setIsOpen(false);
|
|
};
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={toggleMenu}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={user.avatarUrl} alt={user.displayName} />
|
|
<AvatarFallback>
|
|
{user.displayName.charAt(0).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className="hidden md:block">{user.displayName}</span>
|
|
</Button>
|
|
|
|
{isOpen && (
|
|
<>
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={closeMenu}
|
|
/>
|
|
|
|
{/* Menu */}
|
|
<div className="absolute right-0 top-full mt-2 w-56 rounded-md border bg-background shadow-lg z-50">
|
|
<div className="p-2">
|
|
{/* User Info */}
|
|
<div className="px-3 py-2 border-b">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium">{user.displayName}</span>
|
|
{user.isSuperUser && (
|
|
<Crown className="h-3 w-3 text-amber-600" />
|
|
)}
|
|
{user.isAdmin && !user.isSuperUser && (
|
|
<Shield className="h-3 w-3 text-blue-600" />
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">{user.email}</div>
|
|
</div>
|
|
|
|
{/* Menu Items */}
|
|
<div className="py-1">
|
|
<Link
|
|
to="/dashboard"
|
|
className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
|
|
onClick={closeMenu}
|
|
>
|
|
<User className="mr-2 h-4 w-4" />
|
|
Dashboard
|
|
</Link>
|
|
|
|
<Link
|
|
to="/my-scripts"
|
|
className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
|
|
onClick={closeMenu}
|
|
>
|
|
<Code2 className="mr-2 h-4 w-4" />
|
|
My Scripts
|
|
</Link>
|
|
|
|
<Link
|
|
to="/profile"
|
|
className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
|
|
onClick={closeMenu}
|
|
>
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
Profile
|
|
</Link>
|
|
|
|
{user.isAdmin && (
|
|
<Link
|
|
to="/admin"
|
|
className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
|
|
onClick={closeMenu}
|
|
>
|
|
{user.isSuperUser ? (
|
|
<Crown className="mr-2 h-4 w-4 text-amber-600" />
|
|
) : (
|
|
<Shield className="mr-2 h-4 w-4" />
|
|
)}
|
|
{user.isSuperUser ? 'Super Admin' : 'Admin Panel'}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
{/* Logout */}
|
|
<div className="border-t pt-1">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|