simple form submission

src/ProxyFrame.tsx

@@ -7,11 +7,11 @@ export function ProxyFrame(props: { url: string }) { // pass the URL encoded wit
 
   var decodedUrl = decodeURIComponent(props.url);
 
-  useEffect(() => {
+  useEffect(() => { // For now we can redirect to the results. In the future we will add an if statement looking for the users proxy display choice 
     if (localProxy === "rammerhead") {
       RammerheadEncode(decodedUrl).then((result: string) => {
-        console.log("ProxyHref inside:", result);
         setProxiedUrl(result);
+        window.location.href = result;
       });
     }
   }, [localProxy]);

src/pages/Home.tsx

@@ -5,27 +5,40 @@ import { Helmet } from "react-helmet";
 
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
+  const [inputValue, setInputValue] = useState("");
   const { t } = useTranslation();
 
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    window.location.href = "/go/" + encodeURIComponent(inputValue);
+  };
+
   return (
     <HeaderRoute>
       <Helmet>
-        <title>Nebular</title>
+        <title>Nebula</title>
       </Helmet>
       <div class="flex h-full items-center justify-center">
-        <input
+        <form
-          onFocus={() => {
+          onSubmit={handleSubmit}
-            setIsFocused(true);
+          class="flex h-full w-full items-center justify-center"
-          }}
+        >
-          onBlur={() => {
+          <input
-            setIsFocused(false);
+            onFocus={() => {
-          }}
+              setIsFocused(true);
-          type="text"
+            }}
-          className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
+            onBlur={() => {
-            isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
+              setIsFocused(false);
-          } transition-all duration-300`}
+            }}
-          placeholder={isFocused ? "" : t("home.placeholder")}
+            type="text"
-        />
+            value={inputValue}
+            onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
+            className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
+              isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
+            } transition-all duration-300`}
+            placeholder={isFocused ? "" : t("home.placeholder")}
+          />
+        </form>
       </div>
     </HeaderRoute>
   );