added form to the home page.

src/pages/Home.jsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+
+function MyForm() {
+  const [inputs, setInputs] = useState({});
+
+  const handleChange = (event) => {
+    const name = event.target.name;
+    const value = event.target.value;
+    setInputs(values => ({ ...values, [name]: value }))
+  }
+
+  return (
+    <>
+
+    <h4>DNS</h4>
+
+      <form>
+
+        <label>FQDN
+          <input type="text" name="fqdn" value={inputs.fqdn || ""} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+        <label>CNAME target
+          <input type="text" name="cname_target" value={inputs.cname_target || "cygnus.int.jonb.io"} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+    <h4>Reverse Proxy</h4>
+
+        <label>FQDN
+          <input type="text" value={inputs.fqdn} onChange={handleChange} disabled/>
+        </label>
+
+        <br />
+
+        <label>Target Host
+          <input type="text" name="target_host" value={inputs.target_host || ""} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+        <label>Upstream Port
+          <input type="number" name="upstream_port" value={inputs.upstream_port || ""} onChange={handleChange}/>
+        </label>
+
+        <br />
+
+        <label>Protocol
+          <select name="protocol" value={inputs.protocol || ""} onChange={handleChange}>
+            <option value="http" selected>http</option>
+            <option value="https">https</option>
+          </select>
+        </label>
+
+        <br />
+
+        <button type="submit">Submit</button>
+
+      </form>
+    </>
+  )
+}
+
+
+function Home() {
+  return (<><h2>Home Page</h2>
+    <MyForm />
+  </>
+  )
+}
+
+export default Home;