create-better-t-stack/apps/cli/template/base/packages/client/src/components/header.tsx

import { Link } from "@tanstack/react-router";
import { ModeToggle } from "./mode-toggle";

export default function Header() {
  return (
    <div>
      <div className="flex flex-row items-center justify-between px-2 py-1">
        <div className="flex gap-4 text-lg">
          <Link
            to="/"
            activeProps={{
              className: "font-bold",
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>
        </div>
        <div className="flex flex-row items-center gap-2">
          <ModeToggle />
        </div>
      </div>
      <hr />
    </div>
  );
}