this repo has no description
1import { Link } from "@tanstack/react-router";
2import { StatusDot, StatusDotWithLabel } from "~/chapters/status-dot";
3import { chapterGroups } from "~/chapters/chapters";
4
5export function LandingPage() {
6 return (
7 <main className="min-h-screen flex flex-col bg-(--bg-primary)">
8 <section className="border-b border-(--border-default) bg-(--bg-secondary)">
9 <div className="mx-auto grid max-w-6xl gap-10 px-6 py-12 lg:grid-cols-[minmax(0,0.78fr)_minmax(20rem,0.42fr)] lg:items-end">
10 <div>
11 <div className="flex items-center gap-3 mb-8">
12 <StatusDot status="cached" />
13 <span className="text-sm font-mono uppercase text-(--text-muted)">
14 Interactive technical book
15 </span>
16 </div>
17 <h1 className="max-w-3xl text-4xl font-semibold text-(--text-primary) mb-5 leading-[1.05] sm:text-5xl">
18 Prefetching Patterns
19 </h1>
20 <p className="text-base text-(--text-secondary) max-w-2xl leading-relaxed">
21 A chaptered learning lab for comparing no preloading, route preloading, intent
22 preloading, search-param driven data, and synced local collections.
23 </p>
24 </div>
25
26 <aside className="toc-status" aria-label="Reading status legend">
27 <StatusDot status="cached" />
28 <span className="text-xs font-mono uppercase text-(--text-muted)">
29 Read in order. Each chapter keeps the console beside the explanation.
30 </span>
31 <div className="mt-5 grid gap-3 text-sm font-mono text-(--text-muted)">
32 <StatusDotWithLabel status="cached" label="Cached route data" />
33 <StatusDotWithLabel status="fetching" label="Fetching in progress" />
34 <StatusDotWithLabel status="idle" label="Idle route" />
35 </div>
36 </aside>
37 </div>
38 </section>
39
40 <section className="mx-auto w-full max-w-6xl px-6 py-12">
41 <h2 className="mb-8 border-b border-(--border-default) pb-4 text-xl font-semibold text-(--text-primary)">
42 Table of contents
43 </h2>
44
45 <div className="grid gap-10">
46 {chapterGroups.map((group) => (
47 <section key={group.label} className="toc-group" aria-labelledby={`toc-${group.label}`}>
48 <div className="toc-group__heading">
49 <h3 id={`toc-${group.label}`} className="toc-group__title">
50 {group.label}
51 </h3>
52 <p className="toc-group__description">{group.description}</p>
53 </div>
54
55 <ol className="toc-list">
56 {group.chapters.map((chapter, chapterIndex) => (
57 <li key={chapter.to}>
58 <Link
59 to={chapter.to}
60 preload={chapterIndex === 0 ? false : "intent"}
61 className="toc-link group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)"
62 >
63 <span className="toc-link__number">{chapter.number}</span>
64 <span className="toc-link__body">
65 <span className="toc-link__title">{chapter.title}</span>
66 <span className="toc-link__summary">{chapter.summary}</span>
67 <span className="toc-link__tags" aria-label="Concepts">
68 {chapter.tags.map((tag) => (
69 <span key={tag} className="toc-link__tag">
70 {tag}
71 </span>
72 ))}
73 </span>
74 </span>
75 <span className="toc-link__open" aria-hidden="true">
76 >
77 </span>
78 </Link>
79 </li>
80 ))}
81 </ol>
82 </section>
83 ))}
84 </div>
85
86 <div className="mt-12 border-t border-(--border-default) pt-6">
87 <Link
88 to="/basic"
89 className="inline-flex items-center gap-2 border border-(--accent-default) bg-(--accent-surface) px-4 py-3 font-mono text-sm font-semibold text-(--text-primary) transition-colors duration-fast hover:bg-(--accent-subtle) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color)"
90 >
91 Start reading
92 <span aria-hidden="true">></span>
93 </Link>
94 </div>
95 </section>
96
97 <footer className="border-t border-(--border-default) bg-(--bg-card) mt-auto">
98 <div className="max-w-6xl mx-auto px-6 py-6 text-sm font-mono text-(--text-muted)">
99 <p>
100 Built with{" "}
101 <a
102 href="https://tanstack.com/router/latest"
103 target="_blank"
104 rel="noopener noreferrer"
105 className="text-(--accent-default) hover:text-(--accent-hover) hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-card) transition-colors duration-fast"
106 >
107 TanStack Router
108 </a>
109 {" · "}
110 <a
111 href="https://tanstack.com/query/latest"
112 target="_blank"
113 rel="noopener noreferrer"
114 className="text-(--accent-default) hover:text-(--accent-hover) hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-card) transition-colors duration-fast"
115 >
116 TanStack Query
117 </a>
118 {" · "}
119 <a
120 href="https://tanstack.com/start/latest"
121 target="_blank"
122 rel="noopener noreferrer"
123 className="text-(--accent-default) hover:text-(--accent-hover) hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-(--bg-card) transition-colors duration-fast"
124 >
125 TanStack Start
126 </a>
127 </p>
128 </div>
129 </footer>
130 </main>
131 );
132}