From 4c9ed33c14df9e37d7d11faafb4182a3534141ca Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Mon, 5 Jun 2023 12:09:13 -0400
Subject: Enter button on user input

---
 .../react-app/src/components/InputAndButton.tsx    | 77 ++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 extension/react-app/src/components/InputAndButton.tsx

(limited to 'extension/react-app/src/components/InputAndButton.tsx')

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;
-- 
cgit v1.2.3-70-g09d2