48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
import { Button } from '@/components/ui/button';
|
|
import { LogOut, User } from 'lucide-react';
|
|
|
|
export default function Topbar() {
|
|
const router = useRouter();
|
|
const { user, logout } = useAuthStore();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
router.push('/login');
|
|
};
|
|
|
|
const fullName = user ? `${user.firstName} ${user.lastName}` : 'Admin';
|
|
|
|
return (
|
|
<header
|
|
className="h-14 border-b flex items-center justify-between px-6"
|
|
style={{ backgroundColor: '#fff', borderColor: '#E2E8F0' }}
|
|
>
|
|
<div />
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2 text-sm text-slate-600">
|
|
<User size={16} />
|
|
<span>{fullName}</span>
|
|
{user?.roles?.[0] && (
|
|
<span className="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full capitalize">
|
|
{user.roles[0]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleLogout}
|
|
className="text-slate-500 hover:text-red-500 gap-1.5"
|
|
>
|
|
<LogOut size={15} />
|
|
Logout
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|