this repo has no description
1import { Link } from "@tanstack/react-router";
2import { ThemeToggle } from "~/design-system/theme/theme-toggle";
3import { ChapterSelect } from "./chapter-navigation";
4
5export function Header() {
6 return (
7 <header className="sticky top-0 z-40 bg-(--bg-secondary) border-b border-(--border-default)">
8 <div className="mx-auto flex min-h-12 max-w-7xl items-center gap-3 px-4 sm:px-6">
9 <Link
10 to="/"
11 className="flex min-w-0 flex-1 items-baseline gap-3 py-3 text-(--text-primary) hover:text-(--accent-default) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)"
12 >
13 <span className="font-display text-base font-semibold leading-none sm:hidden">
14 Prefetching
15 </span>
16 <span className="hidden font-display text-lg font-semibold leading-none sm:inline">
17 Prefetching Patterns
18 </span>
19 </Link>
20
21 <nav className="flex shrink-0 items-center gap-2" aria-label="Reader navigation">
22 <ChapterSelect />
23 <ThemeToggle />
24 </nav>
25 </div>
26 </header>
27 );
28}