add textinput

src/components/shared/TextInput/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import { observer } from 'mobx-react-lite';
+
+interface Props {
+    defaultValue?: string;
+    placeholder?: string;
+    onChange: (text: string) => void;
+    onEnter?: () => void;
+    onEscape?: () => void;
+    className?: string;
+}
+
+const TextInput = observer((props: Props) => {
+    const [text, setText] = React.useState(props.defaultValue || '');
+    return (
+        <input
+            type="text"
+            placeholder={props.placeholder}
+            value={text}
+            className={clsx(styles.className, styles.textInput)}
+            onChange={(e) => {
+                setText(e.target.value);
+                props.onChange(e.target.value);
+            }}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                    props.onEnter?.();
+                }
+                if (e.key === 'Escape') {
+                    props.onEscape?.();
+                }
+            }}
+            autoFocus
+            autoComplete="off"
+            autoCorrect="off"
+        />
+    );
+});
+
+export default TextInput;

src/components/shared/TextInput/styles.module.scss

@@ -0,0 +1,16 @@
+.textInput {
+    width: 100%;
+    padding: var(--ifm-button-padding-vertical);
+    border: 1px solid #ccc;
+    border-radius: var(--ifm-global-radius);
+    font-size: var(--ifm-font-size-base);
+    box-shadow: var(--ifm-global-shadow-md);
+    transition:
+        border-color 0.3s,
+        box-shadow 0.3s;
+    &:focus {
+        border-color: var(--ifm-link-hover-color);
+        outline: none;
+        box-shadow: 0 0 8px var(--ifm-link-hover-color);
+    }
+}