This commit is contained in:
eric
2026-04-02 07:38:11 -05:00
parent d401a36b71
commit d53ede2ea5
8 changed files with 350 additions and 158 deletions

View File

@@ -1,48 +1,43 @@
"use client";
import Link from "next/link";
import { motion } from "framer-motion";
import { ThemeToggle } from "@/components/theme-toggle";
import { Search, Sparkles } from "lucide-react";
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 (
<motion.header
initial={{ y: -24, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
className="sticky top-0 z-40 border-b border-white/10 bg-slate-950/70 backdrop-blur-xl"
>
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 md:px-6">
<div className="flex items-center gap-6">
<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 text-sm font-semibold">
<Sparkles className="text-cyan-400" size={18} />
Download Nova
<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-4 text-sm text-slate-300 md:flex">
<Link href="/apps"></Link>
<Link href="/insights"></Link>
<Link href="/unlock"></Link>
<Link href="/pricing"></Link>
<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 items-center gap-2">
<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">
<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="rounded-full bg-cyan-400/90 px-4 py-1.5 text-xs font-semibold text-slate-900 shadow-[0_0_20px_rgba(34,211,238,0.45)]">
<Link href="/pricing" className="cta-main rounded-full px-4 py-1.5 text-xs shadow-none md:text-sm">
/
</Link>
</div>
</div>
</motion.header>
</header>
);
}