14. src/components/site-header.tsxの編集

import Link from "next/link";

const nav = [
  { href: "/", label: "TOP" },
  { href: "/about", label: "ABOUT" },
];

export function SiteHeader() {
  return (
    <header className="border-b border-stone-200/80 bg-[var(--background)]/90 backdrop-blur-md dark:border-stone-800">
      <div className="mx-auto flex max-w-3xl items-baseline justify-between gap-6 px-6 py-6">
        <Link href="/" className="font-serif text-xl tracking-tight text-stone-900 dark:text-stone-50">
          JP MONEY
        </Link>
        <nav className="flex gap-5 text-sm text-stone-600 dark:text-stone-400">
          {nav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="transition-colors hover:text-stone-900 dark:hover:text-stone-100"
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}