1 files changed, 69 insertions, 0 deletions
diff --git a/src/client/views/KeywordBox.tsx b/src/client/views/KeywordBox.tsx
new file mode 100644
index 000000000..3faddeb64
--- /dev/null
+++ b/src/client/views/KeywordBox.tsx
@@ -0,0 +1,69 @@
+import { action, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import { Doc } from '../../fields/Doc';
+import { DocData } from '../../fields/DocSymbols';
+import { List } from '../../fields/List';
+import { ObservableReactComponent } from './ObservableReactComponent';
+
+interface KeywordBoxProps {
+    _doc: Doc;
+    _isEditing: boolean;
+}
+
+@observer
+export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @action
+    setToEditing = () => {
+        this._props._isEditing = true;
+    };
+
+    @action
+    setToView = () => {
+        this._props._isEditing = false;
+    };
+
+    submitLabel = () => {};
+
+    onInputChange = () => {};
+
+    render() {
+        const keywordsList = this._props._doc![DocData].data_labels;
+        return (
+            <div className="keywords-container">
+                {(keywordsList as List<string>).map(label => {
+                    return (
+                        <div className="keyword" onClick={this.setToEditing}>
+                            {label}
+                        </div>
+                    );
+                })}
+                {this._props._isEditing ? (
+                    <div>
+                        <input
+                            defaultValue=""
+                            autoComplete="off"
+                            onChange={this.onInputChange}
+                            onKeyDown={e => {
+                                e.key === 'Enter' ? this.submitLabel() : null;
+                                e.stopPropagation();
+                            }}
+                            type="text"
+                            placeholder="Input keywords for document..."
+                            aria-label="keyword-input"
+                            className="keyword-input"
+                            style={{ width: '100%', borderRadius: '5px' }}
+                        />
+                    </div>
+                ) : (
+                    <div></div>
+                )}
+            </div>
+        );
+    }
+}