47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { Link, Outlet } from 'react-router-dom';
|
|
|
|
import env from '@/shared/config/env';
|
|
import { useLogout } from '@/features/auth/hooks/useLogout';
|
|
import { useAuthStore } from '@/features/auth/store/authStore';
|
|
|
|
export function AppLayout() {
|
|
const user = useAuthStore((s) => s.user);
|
|
const logout = useLogout();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<header className="border-b border-gray-200 bg-white">
|
|
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
|
|
<div className="flex items-center gap-6">
|
|
<Link to="/" className="text-lg font-semibold text-gray-900">
|
|
{env.VITE_APP_NAME}
|
|
</Link>
|
|
<nav className="flex items-center gap-4 text-sm text-gray-600">
|
|
<Link to="/" className="hover:text-gray-900">
|
|
Home
|
|
</Link>
|
|
<Link to="/learn" className="hover:text-gray-900">
|
|
Learn
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{user && <span className="text-sm text-gray-500">{user.email}</span>}
|
|
<button
|
|
type="button"
|
|
onClick={() => logout.mutate()}
|
|
disabled={logout.isPending}
|
|
className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50"
|
|
>
|
|
{logout.isPending ? 'Signing out…' : 'Sign out'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="mx-auto max-w-5xl px-4 py-8">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|