added form to the home page.

src/App.css

@@ -18,6 +18,14 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+h4 {
+  text-align: left;
+}
+
+form {
+  text-align: left;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

src/App.jsx

@@ -1,12 +1,28 @@
-import { useState } from 'react'
+import { Routes, Route, Link } from 'react-router-dom';
+import Home from '../src/pages/Home';
 import './App.css'
 
-function App() {
-  // const [count, setCount] = useState(0)
+function About() {
+  return <h2>About</h2>;
+}
 
+function Proxied_Apps() {
+  return <h2>Proxied apps</h2>;
+}
+function App() {
   return (
-    <div className='App'>
-    <p>yatta, yatta, yatta</p>
+    <div>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/Proxied_Apps">Proxied Apps</Link>
+      </nav>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/Proxied_Apps" element={<Proxied_Apps />} />
+      </Routes>
     </div>
   )
 }

src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom';
 import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <BrowserRouter>
+  <App />
+  </BrowserRouter>
 )

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;