38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useAuth } from "@/lib/auth";
|
|
|
|
export default function AuthHeader() {
|
|
const { user, isLoggedIn, logout } = useAuth();
|
|
|
|
// 手机端顶栏由 Sidebar 组件处理，这里只渲染桌面端顶栏
|
|
return (
|
|
<header className="hidden md:flex items-center justify-end px-6 py-3 bg-white border-b border-slate-200 gap-3">
|
|
{isLoggedIn ? (
|
|
<>
|
|
<span className="text-sm text-slate-500">{user?.email}</span>
|
|
{user?.role === "admin" && (
|
|
<span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Admin</span>
|
|
)}
|
|
<button onClick={logout}
|
|
className="text-sm text-slate-600 hover:text-red-500 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-red-300 transition-colors">
|
|
退出
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login"
|
|
className="text-sm text-slate-600 hover:text-blue-600 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-blue-300 transition-colors">
|
|
登录
|
|
</Link>
|
|
<Link href="/register"
|
|
className="text-sm text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition-colors font-medium">
|
|
注册
|
|
</Link>
|
|
</>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|