From 6be650a5ceee71566eba968ead74d26fbd98ea0a Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Fri, 7 Apr 2023 13:24:42 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Update=20Button=20Styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.tsx |  8 +++---
 src/ui/input.tsx    | 70 +++++++++------------------------------------
 2 files changed, 18 insertions(+), 60 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 876bbf3..e0c6c3c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import ChatWindow from "../components/ChatWindow";
 import axios from "axios";
 import Drawer from "../components/Drawer";
+import Input from "../ui/input";
 
 const Home: NextPage = () => {
   const [loading, setLoading] = React.useState<boolean>(false);
@@ -49,17 +50,16 @@ const Home: NextPage = () => {
             {loading ? <div>LOADING...</div> : null}
           </ChatWindow>
 
-          <input
-            type="text"
+          <Input
             value={goalInput}
             onChange={(e) => setGoalInput(e.target.value)}
-          ></input>
+          />
           {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
           <button
             onClick={() => void handleNewGoal()}
             className="w-64 rounded-full bg-gray-300"
           >
-            Save
+            Deploy Agent
           </button>
         </div>
       </main>
diff --git a/src/ui/input.tsx b/src/ui/input.tsx
index f91a002..bf82c37 100644
--- a/src/ui/input.tsx
+++ b/src/ui/input.tsx
@@ -1,61 +1,19 @@
-import type {
-  Dispatch,
-  ForwardedRef,
-  InputHTMLAttributes,
-  KeyboardEventHandler,
-  SetStateAction,
-} from "react";
-import { forwardRef } from "react";
+import React from "react";
 
-const SHARED_STYLE = "rounded-full ";
-const STYLE =
-  SHARED_STYLE +
-  " border-gray-300 focus:border-yellow-500 focus:ring-yellow-500 ";
-const ERROR_STYLE =
-  SHARED_STYLE + " border-red-500 focus:border-red-500 focus:ring-red-500 ";
-
-export interface InputProps<T> extends InputHTMLAttributes<HTMLInputElement> {
-  model: [T, Dispatch<SetStateAction<T>>];
-  error?: [boolean, Dispatch<SetStateAction<boolean>>];
-  enterPressed?: () => void;
+interface InputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const Input = forwardRef(
-  (props: InputProps<string>, ref: ForwardedRef<HTMLInputElement>) => {
-    const { model, error, enterPressed, onKeyDown, className, ...otherProps } =
-      props;
-    const [isError, setIsError] = error || [false, () => undefined];
+const Input = ({ value, onChange }: InputProps) => {
+  return (
+    <input
+      className="shadow-semibold border:black m-3 w-[60%] rounded-xl border-[2px] border-transparent bg-[#3a3a3a] px-2 py-5 font-mono text-lg tracking-wider text-white/75 outline-0 transition-all hover:border-[#1E88E5]/25 focus:border-[#1E88E5]"
+      type="text"
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
 
-    const keyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
-      try {
-        if (e.key === "Enter" && enterPressed) {
-          e.preventDefault();
-          enterPressed();
-          return;
-        }
-
-        if (onKeyDown) onKeyDown(e);
-      } catch (e) {
-        setIsError(true);
-      }
-    };
-
-    return (
-      <input
-        ref={ref}
-        onKeyDown={keyDown}
-        value={model[0]}
-        onChange={(e) => {
-          model[1](e.target.value);
-          setIsError(false);
-        }}
-        /* eslint-disable-next-line @typescript-eslint/restrict-plus-operands */
-        className={(isError ? ERROR_STYLE : STYLE) + className}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-Input.displayName = "input";
 export default Input;