From 85b732b66ebb29e47c1f01bac436e39c26680f38 Mon Sep 17 00:00:00 2001
From: MartinC <59508264+martinc1991@users.noreply.github.com>
Date: Mon, 3 Jun 2024 13:05:48 -0300
Subject: [PATCH] Put layout on _root layout

---
 packages/ui/src/layout.tsx             | 18 ------------------
 packages/ui/src/routeTree.gen.ts       | 24 ++++++++++++------------
 packages/ui/src/routes/__root.tsx      | 19 +++++++++++++++----
 packages/ui/src/routes/about.tsx       | 16 ----------------
 packages/ui/src/routes/about/index.tsx | 13 +++++++++++++
 packages/ui/src/routes/index.tsx       |  9 +++------
 6 files changed, 43 insertions(+), 56 deletions(-)
 delete mode 100644 packages/ui/src/layout.tsx
 delete mode 100644 packages/ui/src/routes/about.tsx
 create mode 100644 packages/ui/src/routes/about/index.tsx

diff --git a/packages/ui/src/layout.tsx b/packages/ui/src/layout.tsx
deleted file mode 100644
index 28c3e74..0000000
--- a/packages/ui/src/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Link } from "@tanstack/react-router";
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <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">{children}</main>
-    </div>
-  );
-}
diff --git a/packages/ui/src/routeTree.gen.ts b/packages/ui/src/routeTree.gen.ts
index e1a008c..7a2290c 100644
--- 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,11 +37,11 @@ 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;
     };
   }
@@ -49,7 +49,7 @@ declare module "@tanstack/react-router" {
 
 // 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
index 60ab5c6..d17541f 100644
--- 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
deleted file mode 100644
index 5dfd4d4..0000000
--- a/packages/ui/src/routes/about.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Layout from "@/layout";
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/about")({
-  component: About,
-});
-
-function About() {
-  return (
-    <Layout>
-      <div className="flex flex-1 items-center justify-center">
-        <h3>About Page</h3>
-      </div>
-    </Layout>
-  );
-}
diff --git a/packages/ui/src/routes/about/index.tsx b/packages/ui/src/routes/about/index.tsx
new file mode 100644
index 0000000..996cdf7
--- /dev/null
+++ 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
index a60359a..08e9105 100644
--- 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>
   );
 }