From 5e86d483011e83214a40892ce7c2e97f4e63147e Mon Sep 17 00:00:00 2001
From: Olaren <git@olaren.dev>
Date: Tue, 3 Feb 2026 06:51:28 -0500
Subject: [PATCH] feat: proper routing between pages

---
 src/Home.tsx              | 37 +++++++++++++++++--------------------
 src/Wash.tsx              | 15 +++++++++++++++
 src/components/Layout.tsx | 16 ++++++++++++++++
 src/index.tsx             |  6 ++++--
 4 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 src/Wash.tsx
 create mode 100644 src/components/Layout.tsx

diff --git a/src/Home.tsx b/src/Home.tsx
index 74466f4..a555522 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -16,26 +16,23 @@ const Home: Component = () => {
   };
 
   return (
-    <div class="max-w-xl w-full p-5">
-      <h1 class="text-3xl font-bold mb-10">Washing Machine</h1>
-      <form class="flex-row" on:submit={onSubmit}>
-        <label for="handle" class="text-neutral-500 text-sm">
-          Handle
-        </label>
-        <div class="flex text-xl">
-          <input
-            name="handle"
-            required
-            autofocus
-            class="bg-slate-300 p-2 w-full"
-            type="search"
-          />
-          <button class="bg-slate-800 text-neutral-200 py-2 px-4" type="submit">
-            Wash
-          </button>
-        </div>
-      </form>
-    </div>
+    <form class="flex-row" on:submit={onSubmit}>
+      <label for="handle" class="text-neutral-500 text-sm">
+        Handle
+      </label>
+      <div class="flex text-xl">
+        <input
+          name="handle"
+          required
+          autofocus
+          class="bg-slate-300 p-2 w-full"
+          type="search"
+        />
+        <button class="bg-slate-800 text-neutral-200 py-2 px-4" type="submit">
+          Wash
+        </button>
+      </div>
+    </form>
   );
 };
 
diff --git a/src/Wash.tsx b/src/Wash.tsx
new file mode 100644
index 0000000..0839148
--- /dev/null
+++ b/src/Wash.tsx
@@ -0,0 +1,15 @@
+// @ts-types="solid-js"
+import { Component } from "solid-js";
+import { useParams } from "@solidjs/router";
+
+const Wash: Component = () => {
+  const params = useParams();
+
+  return (
+    <div>
+      <p>Washing {params.handle} :3</p>
+    </div>
+  );
+};
+
+export default Wash;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..5e6b041
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,16 @@
+// @ts-types="solid-js"
+import { Component } from "solid-js";
+import { A, RouteSectionProps } from "@solidjs/router";
+
+const Layout: Component<RouteSectionProps> = (props) => {
+  return (
+    <div class="max-w-xl w-full p-5">
+      <A href="/">
+        <h1 class="text-3xl font-bold mb-10">Washing Machine</h1>
+      </A>
+      {props.children}
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/index.tsx b/src/index.tsx
index 762ee27..2873918 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,8 @@ import "solid-devtools";
 
 import Home from "./Home.tsx";
 import { Route, Router } from "@solidjs/router";
+import Wash from "./Wash.tsx";
+import Layout from "./components/Layout.tsx";
 
 const root = document.getElementById("root");
 
@@ -16,9 +18,9 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 
 render(
   () => (
-    <Router>
+    <Router root={Layout}>
       <Route path="/" component={Home} />
-      <Route path="/wash/:handle" component={() => <p>:3</p>} />
+      <Route path="/wash/:handle" component={Wash} />
     </Router>
   ),
   root!,
-- 
2.51.2