From 33c9e8bca54d753c7ea976dd178db0cd5408c218 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 13 Feb 2024 00:29:25 +0000
Subject: feature: A usable, yet ugly browser extension

---
 packages/browser-extension/src/OptionsPage.tsx | 42 ++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 packages/browser-extension/src/OptionsPage.tsx

(limited to 'packages/browser-extension/src/OptionsPage.tsx')

diff --git a/packages/browser-extension/src/OptionsPage.tsx b/packages/browser-extension/src/OptionsPage.tsx
new file mode 100644
index 00000000..e3a34bd9
--- /dev/null
+++ b/packages/browser-extension/src/OptionsPage.tsx
@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import usePluginSettings from "./settings";
+
+export default function OptionsPage() {
+  const [settings, setSettings, _1, _2, _3] = usePluginSettings();
+
+  const apiKeyRef = useRef<HTMLInputElement>(null);
+  const addressRef = useRef<HTMLInputElement>(null);
+
+  const onSave = () => {
+    setSettings({
+      apiKey: apiKeyRef.current?.value || "",
+      address: addressRef.current?.value || "",
+    });
+  };
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <span className="text-lg">Settings</span>
+      <hr />
+      <div className="flex space-x-2 pt-2">
+        <label className="m-auto h-full">API Key</label>
+        <input
+          ref={apiKeyRef}
+          defaultValue={settings.apiKey}
+          className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
+        />
+      </div>
+      <div className="flex space-x-2">
+        <label className="m-auto h-full">Server Address</label>
+        <input
+          ref={addressRef}
+          defaultValue={settings.address}
+          className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
+        />
+      </div>
+      <button className="rounded-lg border border-gray-200" onClick={onSave}>
+        Save
+      </button>
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2