72 lines
3.2 KiB
TypeScript
72 lines
3.2 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { useAuth } from "@/lib/auth";
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState(false);
|
|
const { user, isLoggedIn, logout } = useAuth();
|
|
|
|
return (
|
|
<nav className="border-b border-slate-200 bg-white sticky top-0 z-50 shadow-sm">
|
|
<div className="max-w-6xl mx-auto px-4 h-14 flex items-center">
|
|
<Link href="/" className="font-bold text-blue-600 tracking-tight text-lg shrink-0">
|
|
⚡ Arbitrage Engine
|
|
</Link>
|
|
|
|
{/* Desktop nav */}
|
|
<div className="hidden md:flex items-center gap-6 text-sm ml-8">
|
|
<Link href="/" className="text-slate-600 hover:text-blue-600 transition-colors">仪表盘</Link>
|
|
<Link href="/about" className="text-slate-600 hover:text-blue-600 transition-colors">说明</Link>
|
|
</div>
|
|
<div className="hidden md:flex items-center gap-3 text-sm ml-auto">
|
|
{isLoggedIn ? (
|
|
<>
|
|
<span className="text-slate-500 text-xs">{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-slate-500 hover:text-red-500 transition-colors">退出</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="text-slate-500 hover:text-slate-800 transition-colors">登录</Link>
|
|
<Link href="/register" className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded-lg transition-colors">注册</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile */}
|
|
<div className="md:hidden ml-auto flex items-center gap-2">
|
|
{isLoggedIn ? (
|
|
<button onClick={logout} className="text-slate-500 text-sm">退出</button>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className="text-slate-500 text-sm">登录</Link>
|
|
<Link href="/register" className="bg-blue-600 text-white px-2 py-1 rounded text-sm">注册</Link>
|
|
</>
|
|
)}
|
|
<button onClick={() => setOpen(!open)} className="ml-1 p-2 text-slate-500" aria-label="菜单">
|
|
{open ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{open && (
|
|
<div className="md:hidden border-t border-slate-100 bg-white px-4 py-3 space-y-1">
|
|
<Link href="/" onClick={() => setOpen(false)} className="block py-2 text-slate-600 hover:text-blue-600 text-sm">仪表盘</Link>
|
|
<Link href="/about" onClick={() => setOpen(false)} className="block py-2 text-slate-600 hover:text-blue-600 text-sm">说明</Link>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|