36 lines
1.0 KiB
TypeScript
36 lines
1.0 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-4 border-b border-zinc-800 px-4 py-3">
|
|
<Link to="/" className="font-semibold">
|
|
BookLib
|
|
</Link>
|
|
{isAdmin && (
|
|
<Link className="text-sm text-zinc-400 hover:text-zinc-100" to="/admin/users">
|
|
用户
|
|
</Link>
|
|
)}
|
|
{isAdmin && (
|
|
<Link className="text-sm text-zinc-400 hover:text-zinc-100" to="/admin/libraries">
|
|
库管理
|
|
</Link>
|
|
)}
|
|
<div className="ml-auto flex items-center gap-3">
|
|
{right}
|
|
<span className="text-sm text-zinc-400">
|
|
{user?.username}
|
|
{isAdmin ? "(admin)" : ""}
|
|
</span>
|
|
<button className={btn} onClick={logout}>
|
|
退出
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|