Initial commit.

src/routes/__root.tsx

@@ -0,0 +1,55 @@
+import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { AuthProvider } from "@/context/auth/AuthContext";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+/** Root of the application */
+export const Route = createRootRoute({
+  component: () => (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <header className="flex items-center justify-between px-8 py-4 border-b border-slate-700 bg-slate-900">
+          <h1 className="text-2xl font-bold text-slate-100 m-0">
+            DM's Table Companion
+          </h1>
+          <nav aria-label="Main navigation" className="flex gap-6">
+            <Link
+              to="/campaigns"
+              className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
+              activeProps={{
+                className:
+                  "no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
+              }}
+            >
+              Campaigns
+            </Link>
+            <Link
+              to="/sessions"
+              className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
+              activeProps={{
+                className:
+                  "no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
+              }}
+            >
+              Sessions
+            </Link>
+            <Link
+              to="/about"
+              className="no-underline text-slate-200 hover:text-violet-400 transition-colors font-medium border-b-2 border-transparent pb-1"
+              activeProps={{
+                className:
+                  "no-underline text-violet-400 border-violet-400 border-b-2 pb-1",
+              }}
+            >
+              About
+            </Link>
+          </nav>
+        </header>
+        <Outlet />
+        <TanStackRouterDevtools />
+      </AuthProvider>
+    </QueryClientProvider>
+  ),
+});

src/routes/about.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/about')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/about"!</div>
+}

src/routes/campaigns.$campaignId.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/campaigns/$campaignId")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { campaignId } = Route.useParams();
+  return <div>Hello "/campaigns/{campaignId}"!</div>;
+}

src/routes/campaigns.index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/campaigns/")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/campaigns/"!</div>;
+}

src/routes/index.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  component: App,
+});
+
+function App() {
+  return (
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
+        <h1>Hello, Tanstack</h1>
+      </header>
+      <div>
+        <Link to="/campaigns" activeProps={{ className: "weight-bold" }}>
+          Campaigns
+        </Link>
+      </div>
+    </div>
+  );
+}

src/routes/sessions.index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/sessions/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/sessions/"!</div>
+}