1 files changed, 39 insertions, 0 deletions
diff --git a/packages/tweetdeck/src/APITester.tsx b/packages/tweetdeck/src/APITester.tsx
new file mode 100644
index 0000000..fd2af48
--- /dev/null
+++ b/packages/tweetdeck/src/APITester.tsx
@@ -0,0 +1,39 @@
+import { useRef, type FormEvent } from "react";
+
+export function APITester() {
+  const responseInputRef = useRef<HTMLTextAreaElement>(null);
+
+  const testEndpoint = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const form = e.currentTarget;
+      const formData = new FormData(form);
+      const endpoint = formData.get("endpoint") as string;
+      const url = new URL(endpoint, location.href);
+      const method = formData.get("method") as string;
+      const res = await fetch(url, { method });
+
+      const data = await res.json();
+      responseInputRef.current!.value = JSON.stringify(data, null, 2);
+    } catch (error) {
+      responseInputRef.current!.value = String(error);
+    }
+  };
+
+  return (
+    <div className="api-tester">
+      <form onSubmit={testEndpoint} className="endpoint-row">
+        <select name="method" className="method">
+          <option value="GET">GET</option>
+          <option value="PUT">PUT</option>
+        </select>
+        <input type="text" name="endpoint" defaultValue="/api/hello" className="url-input" placeholder="/api/hello" />
+        <button type="submit" className="send-button">
+          Send
+        </button>
+      </form>
+      <textarea ref={responseInputRef} readOnly placeholder="Response will appear here..." className="response-area" />
+    </div>
+  );
+}