Put layout on _root layout

chescalante · Jun 3, 2024 · 85b732b · 85b732b
1 parent 739b93e
commit 85b732b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 56 deletions.
diff --git a/packages/ui/src/layout.tsx b/packages/ui/src/layout.tsx
diff --git a/packages/ui/src/routeTree.gen.ts b/packages/ui/src/routeTree.gen.ts
@@ -11,18 +11,18 @@
 // Import Routes
 
 import { Route as rootRoute } from "./routes/__root";
-import { Route as AboutImport } from "./routes/about";
 import { Route as IndexImport } from "./routes/index";
+import { Route as AboutIndexImport } from "./routes/about/index";
 
 // Create/Update Routes
 
-const AboutRoute = AboutImport.update({
-  path: "/about",
+const IndexRoute = IndexImport.update({
+  path: "/",
   getParentRoute: () => rootRoute,
 } as any);
 
-const IndexRoute = IndexImport.update({
-  path: "/",
+const AboutIndexRoute = AboutIndexImport.update({
+  path: "/about/",
   getParentRoute: () => rootRoute,
 } as any);
 
@@ -37,19 +37,19 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof IndexImport;
       parentRoute: typeof rootRoute;
     };
-    "/about": {
-      id: "/about";
+    "/about/": {
+      id: "/about/";
       path: "/about";
       fullPath: "/about";
-      preLoaderRoute: typeof AboutImport;
+      preLoaderRoute: typeof AboutIndexImport;
       parentRoute: typeof rootRoute;
     };
   }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren({ IndexRoute, AboutRoute });
+export const routeTree = rootRoute.addChildren({ IndexRoute, AboutIndexRoute });
 
 /* prettier-ignore-end */
 
@@ -60,14 +60,14 @@ export const routeTree = rootRoute.addChildren({ IndexRoute, AboutRoute });
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/about"
+        "/about/"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/about": {
-      "filePath": "about.tsx"
+    "/about/": {
+      "filePath": "about/index.tsx"
     }
   }
 }

diff --git a/packages/ui/src/routes/__root.tsx b/packages/ui/src/routes/__root.tsx
@@ -1,4 +1,4 @@
-import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
 import React from "react";
 
 const TanStackRouterDevtools =
@@ -12,9 +12,20 @@ const TanStackRouterDevtools =
 
 export const Route = createRootRoute({
   component: () => (
-    <>
-      <Outlet />
+    <div className="w-screen h-screen flex flex-col">
+      <div className="p-2 flex gap-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>
+        <Link to="/about" className="[&.active]:font-bold">
+          About
+        </Link>
+      </div>
+      <hr />
+      <main className="flex flex-1">
+        <Outlet />
+      </main>
       <TanStackRouterDevtools />
-    </>
+    </div>
   ),
 });
diff --git a/packages/ui/src/routes/about.tsx b/packages/ui/src/routes/about.tsx
diff --git a/packages/ui/src/routes/about/index.tsx b/packages/ui/src/routes/about/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/about/")({
+  component: About,
+});
+
+function About() {
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <h3>About Page</h3>
+    </div>
+  );
+}
diff --git a/packages/ui/src/routes/index.tsx b/packages/ui/src/routes/index.tsx
@@ -1,4 +1,3 @@
-import Layout from "@/layout";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
@@ -7,10 +6,8 @@ export const Route = createFileRoute("/")({
 
 function Index() {
   return (
-    <Layout>
-      <div className="flex flex-1 items-center justify-center">
-        <h3>Home Page</h3>
-      </div>
-    </Layout>
+    <div className="flex flex-1 items-center justify-center">
+      <h3>Home Page</h3>
+    </div>
   );
 }