Refactor code to handle sending code on

"Shift+Enter" key combination

This commit refactors the code in the `Editor` component to handle
sending code when the "Shift+Enter" key combination is pressed.
Previously, pressing "Enter" would only add a new line, but now, when
the "Shift" key is held and "Enter" is pressed, the `handleSendCode`
function is called. This improvement enhances the user experience by
providing a convenient way to send code without having to manually click
the send button. The changes include adding event listeners for the
"Shift" key and "Enter" key, updating the `handleKeydown` and
`handleKeyUp` functions, and modifying the send button style to reflect
whether the "Shift" key is currently held down. No issues are fixed or
referenced in this commit.

components/interpreter/interface.tsx

@@ -285,6 +285,23 @@ export const Editor: React.FC<EditorProps> = ({ focus, lang, input }) => {
     scrollToBottom();
   };
 
+  const [isShiftKeyHeld, setIsShiftKeyHeld] = useState(false);
+  const handleKeydown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.shiftKey === true) {
+      setIsShiftKeyHeld(true);
+    }
+
+    if (e.key === "Enter") {
+      if (e.shiftKey === true) {
+        handleSendCode();
+        e.preventDefault();
+      }
+    }
+  };
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    setIsShiftKeyHeld(false);
+  };
+
   const styles: { [key in LineType]: string } = {
     out: "text-slate-800",
     debug: "text-slate-600",
@@ -306,13 +323,22 @@ export const Editor: React.FC<EditorProps> = ({ focus, lang, input }) => {
       >
         <div className="bg-slate-900 h-full relative text-red-500">
           <textarea
+            onKeyDownCapture={handleKeydown}
+            onKeyUpCapture={handleKeyUp}
             onChange={handleUpdateInput}
             rows={10}
             className="h-full w-full bg-slate-900 p-3 text-white font-mono"
           ></textarea>
           <button
             onClick={() => handleSendCode()}
-            className="absolute bottom-2 right-2 text-sky-400 text-[10px] px-2 border border-sky-800 hover:bg-sky-400 hover:text-white rounded-md"
+            className={`
+            absolute bottom-2 right-2  text-[10px] px-2 
+            border
+            ${isShiftKeyHeld ? "bg-sky-500 text-sky-900" : ""}
+            text-sky-400 hover:text-white
+            border-sky-800 hover:bg-sky-400  
+            rounded-md
+            `}
           >
             send
           </button>