Add implementation

src/components/HomeClient.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "waku";
+import { useRepo } from "@automerge/automerge-repo-react-hooks";
+import { createPoll } from "../lib/poll.js";
+import type { Poll } from "../lib/types.js";
+
+export default function HomeClient() {
+  const [title, setTitle] = useState("");
+  const [joinId, setJoinId] = useState("");
+  const repo = useRepo();
+  const router = useRouter();
+
+  const handleCreate = () => {
+    if (!title.trim()) return;
+    const handle = repo.create<Poll>();
+    handle.change((doc) => {
+      const poll = createPoll(title.trim());
+      doc.title = poll.title;
+      doc.options = poll.options;
+    });
+    router.push(`/poll/${handle.documentId}`);
+  };
+
+  const handleJoin = () => {
+    const id = joinId.trim();
+    if (!id) return;
+    router.push(`/poll/${id}`);
+  };
+
+  return (
+    <div className="space-y-8">
+      <title>P2P Poll</title>
+
+      {/* Create Poll */}
+      <section className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+        <h2 className="mb-4 text-lg font-semibold">Create a New Poll</h2>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+            placeholder="Enter poll title..."
+            className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+          <button
+            onClick={handleCreate}
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+          >
+            Create
+          </button>
+        </div>
+      </section>
+
+      {/* Join Poll */}
+      <section className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+        <h2 className="mb-4 text-lg font-semibold">Join an Existing Poll</h2>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={joinId}
+            onChange={(e) => setJoinId(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleJoin()}
+            placeholder="Paste poll ID or link..."
+            className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+          <button
+            onClick={handleJoin}
+            className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700"
+          >
+            Join
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}