Init commit

2026-08-29 09:08:22 +05:00
commit eaa9a7bef2
21 changed files with 2738 additions and 0 deletions
@@ -0,0 +1,85 @@
+import { useEffect, useState } from "preact/hooks";
+import { createClient } from "@connectrpc/connect";
+import { createConnectTransport } from "@connectrpc/connect-web";
+import { Dices, Hash, Send } from "lucide-preact";
+import { HomelabService } from "./gen/homelab/v1/homelab_pb";
+
+const client = createClient(HomelabService, createConnectTransport({ baseUrl: "" }));
+
+export function App() {
+  const [lucky, setLucky] = useState<number | null>(null);
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState("");
+  const [greeting, setGreeting] = useState("");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    client.getLuckyNumber({}).then((r) => setLucky(r.number));
+  }, []);
+
+  const run = async (fn: () => Promise<unknown>) => {
+    try {
+      await fn();
+      setError("");
+    } catch (e) {
+      setError(String(e));
+    }
+  };
+
+  return (
+    <div class="mx-auto max-w-md px-4 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]">
+      <div class="navbar px-0">
+        <div class="navbar-start" />
+        <div class="navbar-center">
+          <span class="text-lg font-bold">Homelab</span>
+        </div>
+        <div class="navbar-end" />
+      </div>
+
+      {error && <div role="alert" class="alert alert-error text-sm">{error}</div>}
+
+      <div class="stats w-full shadow bg-base-200 mt-4">
+        <div class="stat">
+          <div class="stat-figure text-primary"><Dices size={28} /></div>
+          <div class="stat-title">Lucky number</div>
+          <div class="stat-value text-primary">{lucky ?? "…"}</div>
+          <div class="stat-desc">set at server start</div>
+        </div>
+        <div class="stat">
+          <div class="stat-figure text-secondary"><Hash size={28} /></div>
+          <div class="stat-title">Counter</div>
+          <div class="stat-value text-secondary">{count}</div>
+          <div class="stat-actions">
+            <button class="btn btn-sm btn-secondary" onClick={() => run(async () => setCount((await client.incrementCounter({})).value))}>
+              +1
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <form
+        class="card bg-base-200 shadow mt-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          run(async () => setGreeting((await client.sayHello({ name })).greeting));
+        }}
+      >
+        <div class="card-body">
+          <h2 class="card-title text-base">Hello</h2>
+          <div class="flex gap-2">
+            <input
+              class="input input-bordered flex-1"
+              value={name}
+              onInput={(e) => setName((e.target as HTMLInputElement).value)}
+              placeholder="NAME"
+            />
+            <button type="submit" class="btn btn-primary">
+              <Send size={16} /> Send
+            </button>
+          </div>
+          {greeting && <p class="text-xl font-semibold">{greeting}</p>}
+        </div>
+      </form>
+    </div>
+  );
+}