forked from andika/membership-fe
96 lines
3.2 KiB
JavaScript
96 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { Button } from './ui/button';
|
|
import { Users, LogOut, LayoutDashboard } from 'lucide-react';
|
|
|
|
const Navbar = () => {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<nav className="bg-white border-b border-[#EAE0D5] sticky top-0 z-50 backdrop-blur-sm bg-white/90">
|
|
<div className="max-w-7xl mx-auto px-6 py-4">
|
|
<div className="flex justify-between items-center">
|
|
<Link to={user ? "/dashboard" : "/"} className="flex items-center gap-2">
|
|
<Users className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
|
|
<span className="text-2xl font-semibold fraunces text-[#3D405B]">Membership</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{user ? (
|
|
<>
|
|
{user.role === 'admin' && (
|
|
<Link to="/admin">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
|
|
data-testid="admin-nav-button"
|
|
>
|
|
<LayoutDashboard className="h-4 w-4 mr-2" />
|
|
Admin
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
<Link to="/events">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
|
|
data-testid="events-nav-button"
|
|
>
|
|
Events
|
|
</Button>
|
|
</Link>
|
|
<Link to="/profile">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
|
|
data-testid="profile-nav-button"
|
|
>
|
|
Profile
|
|
</Button>
|
|
</Link>
|
|
<Button
|
|
onClick={handleLogout}
|
|
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
|
|
data-testid="logout-button"
|
|
>
|
|
<LogOut className="h-4 w-4 mr-2" />
|
|
Logout
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link to="/login">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
|
|
data-testid="login-nav-button"
|
|
>
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
<Link to="/register">
|
|
<Button
|
|
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
|
|
data-testid="register-nav-button"
|
|
>
|
|
Join Us
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|