olaren.dev
washes u
feat: handle search ui
+8
deno.lock
+8
deno.lock
···
1
1
{
2
2
"version": "5",
3
3
"specifiers": {
4
+
"npm:@solidjs/router@~0.15.4": "0.15.4_solid-js@1.9.11__seroval@1.5.0",
4
5
"npm:@tailwindcss/vite@^4.1.13": "4.1.18_vite@7.3.1__picomatch@4.0.3",
5
6
"npm:solid-devtools@~0.34.3": "0.34.5_solid-js@1.9.11__seroval@1.5.0_vite@7.3.1__picomatch@4.0.3_@babel+core@7.28.6",
6
7
"npm:solid-js@^1.9.9": "1.9.11_seroval@1.5.0",
···
555
556
"solid-js"
556
557
]
557
558
},
559
+
"@solidjs/router@0.15.4_solid-js@1.9.11__seroval@1.5.0": {
560
+
"integrity": "sha512-WOpgg9a9T638cR+5FGbFi/IV4l2FpmBs1GpIMSPa0Ce9vyJN7Wts+X2PqMf9IYn0zUj2MlSJtm1gp7/HI/n5TQ==",
561
+
"dependencies": [
562
+
"solid-js"
563
+
]
564
+
},
558
565
"@tailwindcss/node@4.1.18": {
559
566
"integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
560
567
"dependencies": [
···
1104
1111
"workspace": {
1105
1112
"packageJson": {
1106
1113
"dependencies": [
1114
+
"npm:@solidjs/router@~0.15.4",
1107
1115
"npm:@tailwindcss/vite@^4.1.13",
1108
1116
"npm:solid-devtools@~0.34.3",
1109
1117
"npm:solid-js@^1.9.9",
+1
package.json
+1
package.json
-17
src/App.tsx
-17
src/App.tsx
···
1
-
import type { Component } from "solid-js";
2
-
3
-
const App: Component = () => {
4
-
return (
5
-
<div class="max-w-xl w-full p-5">
6
-
<h1 class="text-2xl mb-10">Washing Machine</h1>
7
-
<form class="flex">
8
-
<input class="bg-slate-300 p-2 w-full" type="search" />
9
-
<button class="bg-slate-800 text-neutral-200 p-2" type="submit">
10
-
wash
11
-
</button>
12
-
</form>
13
-
</div>
14
-
);
15
-
};
16
-
17
-
export default App;
+42
src/Home.tsx
+42
src/Home.tsx
···
1
+
import type { Component } from "solid-js";
2
+
import { useNavigate } from "@solidjs/router";
3
+
4
+
const Home: Component = () => {
5
+
const naviguate = useNavigate();
6
+
7
+
const onSubmit = (e: SubmitEvent) => {
8
+
// TODO: Validate handle before submit??
9
+
e.preventDefault();
10
+
11
+
const form = e.target as HTMLFormElement;
12
+
const handleSearch = form.elements.namedItem("handle") as HTMLInputElement;
13
+
const handle = handleSearch.value;
14
+
15
+
naviguate(`/wash/${handle}`);
16
+
};
17
+
18
+
return (
19
+
<div class="max-w-xl w-full p-5">
20
+
<h1 class="text-3xl font-bold mb-10">Washing Machine</h1>
21
+
<form class="flex-row" on:submit={onSubmit}>
22
+
<label for="handle" class="text-neutral-500 text-sm">
23
+
Handle
24
+
</label>
25
+
<div class="flex text-xl">
26
+
<input
27
+
name="handle"
28
+
required
29
+
autofocus
30
+
class="bg-slate-300 p-2 w-full"
31
+
type="search"
32
+
/>
33
+
<button class="bg-slate-800 text-neutral-200 py-2 px-4" type="submit">
34
+
Wash
35
+
</button>
36
+
</div>
37
+
</form>
38
+
</div>
39
+
);
40
+
};
41
+
42
+
export default Home;
+11
-2
src/index.tsx
+11
-2
src/index.tsx
···
3
3
import { render } from "solid-js/web";
4
4
import "solid-devtools";
5
5
6
-
import App from "./App.tsx";
6
+
import Home from "./Home.tsx";
7
+
import { Route, Router } from "@solidjs/router";
7
8
8
9
const root = document.getElementById("root");
9
10
···
13
14
);
14
15
}
15
16
16
-
render(() => <App />, root!);
17
+
render(
18
+
() => (
19
+
<Router>
20
+
<Route path="/" component={Home} />
21
+
<Route path="/wash/:handle" component={() => <p>:3</p>} />
22
+
</Router>
23
+
),
24
+
root!,
25
+
);