Initial commit

app/client/pages/__root.tsx

@@ -0,0 +1,33 @@
+import { Button, HStack, Stack } from "@chakra-ui/react";
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import React from "react";
+
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        // Lazy load in development
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+          // For Embedded Mode
+          // default: res.TanStackRouterDevtoolsPanel
+        })),
+      );
+
+export const Route = createRootRoute({
+  component: () => (
+    <Stack padding={3}>
+      <HStack>
+        <Link to="/">
+          <Button>Home</Button>
+        </Link>
+        <Link to="/about">
+          <Button>About</Button>
+        </Link>
+      </HStack>
+      <hr style={{ padding: "4px" }} />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </Stack>
+  ),
+});

app/client/pages/about.lazy.tsx

@@ -0,0 +1,21 @@
+import { Text, Icon, Stack } from "@chakra-ui/react";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/about")({
+  component: About,
+});
+
+function About() {
+  return (
+    <Stack flexDirection={"row"} alignItems={"center"}>
+      <Text>Hello from About!</Text>
+      <Text>And NerdFonts!</Text>
+      <Icon>
+        <i className="nf nf-fa-heart" />
+      </Icon>
+      <Icon>
+        <i className="nf nf-custom-vim" />
+      </Icon>
+    </Stack>
+  );
+}

app/client/pages/book.lazy.tsx

@@ -0,0 +1,20 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { gql, useQuery } from "@apollo/client";
+
+export const Route = createLazyFileRoute("/book")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>"/book"</div>;
+}
+
+const getBookQuery = gql`
+  query BookOne {
+    booksMany {
+      id
+      author
+      title
+    }
+  }
+`;

app/client/pages/index.lazy.tsx

@@ -0,0 +1,41 @@
+import { Text, Stack } from "@chakra-ui/react";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+import { gql, useQuery } from "@apollo/client";
+
+export const Route = createLazyFileRoute("/")({
+  component: Index,
+});
+
+function Index() {
+  const { data } = useQuery(getBooksQuery);
+
+  return (
+    <Stack>
+      <Text>Hello world!</Text>
+      <Text>This is my template!</Text>
+      <Stack>
+        {data && (
+          <>
+            {data.booksMany.map((book: any) => (
+              <Stack key={book.id}>
+                <Text>{book.title}</Text>
+                <Text>{book.author}</Text>
+              </Stack>
+            ))}
+          </>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
+
+const getBooksQuery = gql`
+  query BooksMany {
+    booksMany {
+      id
+      author
+      title
+    }
+  }
+`;