36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Outlet } from "react-router-dom";
|
|
import { LogOut } from "lucide-react";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import Sidebar from "./Sidebar";
|
|
import NotificationBell from "./NotificationBell";
|
|
|
|
export default function Layout() {
|
|
const { user, logout } = useAuth();
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-950 text-gray-100">
|
|
<Sidebar />
|
|
|
|
<div className="flex flex-1 flex-col overflow-hidden">
|
|
{/* Header */}
|
|
<header className="flex h-16 items-center justify-end gap-4 border-b border-gray-800 bg-gray-900 px-6">
|
|
<NotificationBell />
|
|
<span className="text-sm text-gray-300">{user?.username}</span>
|
|
<button
|
|
onClick={logout}
|
|
className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Logout
|
|
</button>
|
|
</header>
|
|
|
|
{/* Main content */}
|
|
<main className="flex-1 overflow-y-auto p-6">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|