From aeb9b9579b637cc9220160789f46e50b91fa5892 Mon Sep 17 00:00:00 2001
From: Giri Madhan <87971509+giri-madhan@users.noreply.github.com>
Date: Wed, 19 Apr 2023 22:09:40 +0530
Subject: [PATCH] feat: [#232] Added a bigger UI for Goal input (#242)

* feat(#232): added a bigger textarea input for Goal.

* fix: added a padding top for goal input on mobile.

* feat: added shift+enter should to create new line.

* fix: disabled resizing goal input.
---
 src/components/Input.tsx | 24 ++++++++++++++++++++++--
 src/components/Label.tsx |  7 ++++++-
 src/pages/index.tsx      | 10 +++++++---
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 105d405078..65b14671e6 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -8,7 +8,7 @@ import type { toolTipProperties } from "./types";
 interface InputProps {
   left?: React.ReactNode;
   value: string | number;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
   placeholder?: string;
   disabled?: boolean;
   setValue?: (value: string) => void;
@@ -16,7 +16,7 @@ interface InputProps {
   attributes?: { [key: string]: string | number | string[] }; // attributes specific to input type
   toolTipProperties?: toolTipProperties;
   inputRef?: React.RefObject<HTMLInputElement>;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
 }
 
 const Input = (props: InputProps) => {
@@ -41,6 +41,10 @@ const Input = (props: InputProps) => {
     return type === "range";
   };
 
+  const isTypeTextArea = () => {
+    return type === "textarea";
+  };
+
   let inputElement;
   const options = attributes?.options;
 
@@ -58,6 +62,22 @@ const Input = (props: InputProps) => {
         onChange={setValue}
       />
     );
+  } else if (isTypeTextArea()) {
+    inputElement = (
+      <textarea
+        className={clsx(
+          "border:black delay-50 w-full resize-none h-20 rounded-xl bg-[#3a3a3a] text-sm tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/40 focus:border-[#1E88E5] py-3 md:text-lg border-[2px] border-white/10 px-2",
+          disabled && " cursor-not-allowed hover:border-white/10",
+          left && "md:rounded-l-none"
+        )}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        {...attributes}
+      />
+    );
   } else {
     inputElement = (
       <input
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
index c7b6360c3b..3a8aa3de74 100644
--- a/src/components/Label.tsx
+++ b/src/components/Label.tsx
@@ -9,13 +9,18 @@ interface LabelProps {
 }
 
 const Label = ({ type, left, toolTipProperties }: LabelProps) => {
+  const isTypeTextArea = () => {
+    return type === "textarea";
+  };
+  
   return (
     <Tooltip
       child={
         <div
           className={`center flex items-center rounded-xl rounded-r-none ${
             type !== "range" ? "border-r-0 border-white/10 md:border-[2px]" : ""
-          }  py-2 text-sm font-semibold tracking-wider transition-all sm:py-3 md:pl-3 md:text-lg`}
+          }  py-2 text-sm font-semibold tracking-wider transition-all sm:py-3 md:pl-3 md:text-lg 
+          ${isTypeTextArea() && 'md:h-20'}`}
         >
           {left}
         </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9b9b9b2fba..b81bf1985b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -88,9 +88,12 @@ const Home: NextPage = () => {
     agent.run().then(console.log).catch(console.error);
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && !disableDeployAgent) {
-      handleNewGoal()
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter'&& !disableDeployAgent) {
+      if (!e.shiftKey) {
+        // Only Enter is pressed, execute the function
+        handleNewGoal();
+      }
     }
   }
 
@@ -222,6 +225,7 @@ const Home: NextPage = () => {
                   onChange={(e) => setGoalInput(e.target.value)}
                   onKeyDown={(e) => handleKeyPress(e)}
                   placeholder="Make the world a better place."
+                  type='textarea'
                 />
               </Expand>
             </div>