create-better-t-stack/apps/cli/templates/frontend/react/web-base/src/components/header.tsx.hbs

{{#if (includes frontend "next")}}
"use client";
import Link from "next/link";
{{else if (includes frontend "react-router")}}
import { NavLink } from "react-router";
{{else if (or (includes frontend "tanstack-router") (includes frontend "tanstack-start"))}}
import { Link } from "@tanstack/react-router";
{{/if}}
{{#unless (includes frontend "tanstack-start")}}
import { ModeToggle } from "./mode-toggle";
{{/unless}}
{{#if auth}}
import UserMenu from "./user-menu";
{{/if}}

export default function Header() {
  const links = [
    { to: "/", label: "Home" },
    {{#if auth}}
      { to: "/dashboard", label: "Dashboard" },
    {{/if}}
    {{#if (includes examples "todo")}}
    { to: "/todos", label: "Todos" },
    {{/if}}
    {{#if (includes examples "ai")}}
    { to: "/ai", label: "AI Chat" },
    {{/if}}
  ];

  return (
    <div>
      <div className="flex flex-row items-center justify-between px-2 py-1">
        <nav className="flex gap-4 text-lg">
          {links.map(({ to, label }) => {
            {{#if (includes frontend "next")}}
            return (
              <Link key={to} href={to}>
                {label}
              </Link>
            );
            {{else if (includes frontend "react-router")}}
            return (
              <NavLink
                key={to}
                to={to}
                className={({ isActive }) => isActive ? "font-bold" : ""}
                end
              >
                {label}
              </NavLink>
            );
            {{else if (or (includes frontend "tanstack-router") (includes frontend "tanstack-start"))}}
            return (
              <Link
                key={to}
                to={to}
              >
                {label}
              </Link>
            );
            {{else}}
            return null;
            {{/if}}
          })}
        </nav>
        <div className="flex items-center gap-2">
          {{#unless (includes frontend "tanstack-start")}}
          <ModeToggle />
          {{/unless}}
          {{#if auth}}
          <UserMenu />
          {{/if}}
        </div>
      </div>
      <hr />
    </div>
  );
}