30 lines
2.0 KiB
TypeScript
30 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ArrowUpRight, LogOut } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { clearToken, getToken } from "@/lib/auth";
|
|
|
|
const links = [["首页", "#top"], ["关于我们", "#about"], ["核心服务", "#services"], ["基金产品", "#funds"]];
|
|
|
|
export function PublicHeader() {
|
|
const [authenticated, setAuthenticated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setAuthenticated(Boolean(getToken()));
|
|
}, []);
|
|
|
|
return (
|
|
<header className="fixed inset-x-0 top-0 z-40 border-b border-white/10 bg-[var(--brand-navy)]/85 text-white backdrop-blur-xl">
|
|
<div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-8">
|
|
<Link href="/#top" className="flex items-center gap-3" aria-label="华夏基金首页">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-xl bg-white text-[var(--brand-primary)] shadow-sm"><span className="text-lg font-bold">华</span></span>
|
|
<span><span className="block text-lg font-semibold tracking-wide">华夏基金</span><span className="block text-[10px] uppercase tracking-[0.25em] text-blue-100">Huaxia Fund</span></span>
|
|
</Link>
|
|
<nav className="hidden items-center gap-8 lg:flex">{links.map(([label, href]) => <Link key={href} href={href} className="text-sm text-blue-50 transition hover:text-white">{label}</Link>)}</nav>
|
|
{authenticated ? <button onClick={() => { clearToken(); setAuthenticated(false); window.location.href = "/"; }} className="flex items-center gap-1.5 rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-[var(--brand-navy)] transition hover:bg-blue-50"><LogOut className="h-4 w-4" />退出登录</button> : <div className="flex items-center gap-3"><Link href="/login" className="flex items-center gap-1.5 rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-[var(--brand-navy)] transition hover:bg-blue-50">登录 <ArrowUpRight className="h-4 w-4" /></Link></div>}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|