42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { btn } from "./ui";
|
|
|
|
export function TopBar({ right }: { right?: ReactNode }) {
|
|
const { user, isAdmin, logout } = useAuth();
|
|
return (
|
|
<header className="flex shrink-0 items-center gap-2 border-b border-stone-800/80 px-4 py-3">
|
|
<Link to="/" className="font-serif text-lg font-semibold tracking-wide">
|
|
Book<span className="text-amber-500">Lib</span>
|
|
</Link>
|
|
{isAdmin && (
|
|
<Link
|
|
className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
|
|
to="/admin/users"
|
|
>
|
|
用户
|
|
</Link>
|
|
)}
|
|
{isAdmin && (
|
|
<Link
|
|
className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
|
|
to="/admin/libraries"
|
|
>
|
|
库管理
|
|
</Link>
|
|
)}
|
|
<div className="ml-auto flex items-center gap-3">
|
|
{right}
|
|
<span className="text-sm text-stone-400">
|
|
{user?.username}
|
|
{isAdmin ? "(admin)" : ""}
|
|
</span>
|
|
<button className={btn} onClick={logout}>
|
|
退出
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|