61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
// assets/js/components/Navbar.js
|
|
const Navbar = ({ user, onLogout, userType = "user" }) => {
|
|
const colorMap = {
|
|
admin: "from-red-500 to-red-600",
|
|
manager: "from-yellow-500 to-yellow-600",
|
|
user: "from-blue-500 to-blue-600",
|
|
};
|
|
|
|
const labelMap = {
|
|
admin: "Admin",
|
|
manager: "Manager",
|
|
user: "User",
|
|
};
|
|
|
|
const textColorMap = {
|
|
admin: "text-red-400",
|
|
manager: "text-yellow-400",
|
|
user: "text-blue-400",
|
|
};
|
|
|
|
return (
|
|
<nav className="bg-gradient-to-r from-slate-800 to-slate-900 shadow-xl sticky top-0 z-50 border-b border-slate-700">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<div className="text-2xl font-bold text-blue-400">
|
|
🔍 Lost & Found
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<NotificationDropdown />
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className={`w-10 h-10 rounded-full bg-gradient-to-br ${
|
|
colorMap[userType] || colorMap.user
|
|
} text-white flex items-center justify-center font-semibold shadow-lg`}
|
|
>
|
|
{Helpers.getInitials(user?.name)}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium text-white">{user?.name}</span>
|
|
{userType !== "user" && (
|
|
<span
|
|
className={`text-xs ${textColorMap[userType]} font-semibold`}
|
|
>
|
|
{labelMap[userType]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onLogout}
|
|
className="px-4 py-2 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition shadow-lg"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|