zhimingge/components/header.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChatGPT } from "@/components/svg";
import { ModeToggle } from "@/components/mode-toggle";

const NAV_ITEMS = [
  { href: "/learn", label: "易经学习" },
  { href: "/liuyao", label: "六爻算卦" },
  { href: "/bazi", label: "生辰八字" },
  { href: "/combined", label: "综合测算" },
];

function NavLink({ href, label }: { href: string; label: string }) {
  const pathname = usePathname();
  const active =
    href === "/"
      ? pathname === "/"
      : pathname === href || pathname.startsWith(`${href}/`);

  return (
    <Link
      href={href}
      className={`whitespace-nowrap text-sm transition-colors ${
        active
          ? "font-medium text-foreground"
          : "text-muted-foreground hover:text-foreground"
      }`}
    >
      {label}
    </Link>
  );
}

export default function Header() {
  return (
    <header className="bg-secondary py-2 shadow">
      <div className="mx-auto flex w-full max-w-4xl flex-col gap-2 px-4 sm:flex-row sm:items-center sm:justify-between">
        <Link href="/" className="flex items-center justify-center gap-2 sm:justify-start">
          <ChatGPT />
          <span className="font-medium">知命阁</span>
        </Link>
        <nav className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
          {NAV_ITEMS.map((item) => (
            <NavLink key={item.href} {...item} />
          ))}
        </nav>
        <div className="flex justify-center sm:justify-end">
          <ModeToggle />
        </div>
      </div>
    </header>
  );
}