feat(web-tanstack): consume marketingPages.siteSettings + navigation.header via tRPC client

apps/web-tanstack/src/routes/index.tsx

@@ -1,14 +1,43 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
+import { useTRPC } from "@repo/core-trpc";
 
-export const Route = createFileRoute("/")({
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Route = createFileRoute("/" as any)({
   component: Home,
 });
 
 function Home() {
+  const trpc = useTRPC();
+  const siteSettings = useQuery(trpc.marketingPages.siteSettings.queryOptions());
+  const header = useQuery(trpc.navigation.header.queryOptions());
+
+  if (siteSettings.isPending || header.isPending) {
+    return <main>Loading…</main>;
+  }
+  if (siteSettings.error || header.error) {
     return (
       <main>
-      <h1>Template — TanStack Start</h1>
+        Failed to load: {siteSettings.error?.message ?? header.error?.message}
-      <p>Clean Architecture Monorepo Template</p>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <header>
+        <h1>{siteSettings.data?.siteName} — TanStack edition</h1>
+        <nav>
+          <ul>
+            {header.data?.items.map((item) => (
+              <li key={item.href}>
+                <a href={item.href}>{item.label}</a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </header>
+      <p>This page is rendered by TanStack Router and consumes the same feature packages as the Next.js app.</p>
     </main>
   );
 }