Enter button on user input

1 files changed, 77 insertions, 0 deletions

diff --git a/extension/react-app/src/components/InputAndButton.tsx b/extension/react-app/src/components/InputAndButton.tsx
new file mode 100644
index 00000000..0a8592f2
--- /dev/null
+++ b/extension/react-app/src/components/InputAndButton.tsx
@@ -0,0 +1,77 @@
+import React, { useRef } from "react";
+import styled from "styled-components";
+import { vscBackground } from ".";
+
+interface InputAndButtonProps {
+  onUserInput: (input: string) => void;
+}
+
+const TopDiv = styled.div`
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 0;
+`;
+
+const Input = styled.input`
+  padding: 0.5rem;
+  border: 1px solid white;
+  background-color: ${vscBackground};
+  color: white;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  outline: none;
+`;
+
+const Button = styled.button`
+  padding: 0.5rem;
+  border: 1px solid white;
+  background-color: ${vscBackground};
+  color: white;
+  border-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+  cursor: pointer;
+
+  &:hover {
+    background-color: white;
+    color: black;
+  }
+`;
+
+function InputAndButton(props: InputAndButtonProps) {
+  const userInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <TopDiv className="grid grid-cols-2 space-x-0">
+      <Input
+        ref={userInputRef}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            props.onUserInput(e.currentTarget.value);
+          }
+        }}
+        type="text"
+        onSubmit={(ev) => {
+          props.onUserInput(ev.currentTarget.value);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      />
+      <Button
+        onClick={(e) => {
+          if (userInputRef.current) {
+            props.onUserInput(userInputRef.current.value);
+          }
+          e.stopPropagation();
+        }}
+      >
+        Enter
+      </Button>
+    </TopDiv>
+  );
+}
+
+export default InputAndButton;