44 lines
2.2 KiB
TypeScript
44 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { Search } from "lucide-react";
|
|
import { HiddenEasterEggTrigger } from "@/components/hidden-easter-egg-trigger";
|
|
import { useAuth } from "@/components/auth-provider";
|
|
|
|
export function Navbar() {
|
|
const { session, loginAs, logout } = useAuth();
|
|
return (
|
|
<header className="sticky top-0 z-40 border-b border-white/10 bg-slate-950/70 backdrop-blur-2xl">
|
|
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 md:h-18 md:px-6">
|
|
<div className="flex min-w-0 items-center gap-4 md:gap-8">
|
|
<HiddenEasterEggTrigger>
|
|
<Link href="/" className="flex items-center gap-2.5">
|
|
<span className="grid h-8 w-8 place-items-center rounded-xl border border-cyan-300/40 bg-cyan-400/10 text-sm">D</span>
|
|
<span className="text-sm font-semibold tracking-wide md:text-base">Download Nova</span>
|
|
</Link>
|
|
</HiddenEasterEggTrigger>
|
|
<nav className="hidden items-center gap-5 text-sm text-slate-300 lg:flex">
|
|
<Link href="/apps" className="transition hover:text-cyan-200">资源库</Link>
|
|
<Link href="/insights" className="transition hover:text-cyan-200">数据洞察</Link>
|
|
<Link href="/unlock" className="transition hover:text-cyan-200">解锁中心</Link>
|
|
<Link href="/pricing" className="transition hover:text-cyan-200">会员套餐</Link>
|
|
</nav>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2.5">
|
|
<button className="pill hidden md:inline-flex" onClick={session.isLoggedIn ? logout : () => loginAs()}>
|
|
{session.isLoggedIn ? `${session.userName ?? "用户"} · ${session.accessLevel}` : "未登录"}
|
|
</button>
|
|
<Link href="/apps" className="rounded-full border border-white/20 p-2 transition hover:border-cyan-300/40 hover:bg-cyan-400/10">
|
|
<Search size={16} />
|
|
</Link>
|
|
<ThemeToggle />
|
|
<Link href="/pricing" className="cta-main rounded-full px-4 py-1.5 text-xs shadow-none md:text-sm">
|
|
登录 / 会员
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|