add: template editor

src/components/MarkdownTemplate/EnumsEditor.js

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+
+const EnumsEditor = ({ enums, onChange }) => {
+    const [_enums, setEnums] = useState(enums || []);
+
+    return (
+        <div className="box">
+            <ul>
+                {_enums.map((item, index) => (
+                    <li key={index} className="field has-addons" style={{ marginBottom: "0.5rem" }}>
+                        <div className="control is-expanded">
+                            <input
+                                className="input is-small"
+                                type="text"
+                                value={item}
+                                onChange={(e) => {
+                                    const updated = [..._enums];
+                                    updated[index] = e.target.value;
+                                    setEnums(updated);
+                                    onChange(updated);
+                                }}
+                            />
+                        </div>
+                        <div className="control">
+                            <button
+                                className="button is-small is-danger"
+                                type="button"
+                                onClick={() => {
+                                    const updated = [..._enums];
+                                    updated.splice(index, 1);
+                                    setEnums(updated);
+                                    onChange(updated);
+                                }}
+                            >
+                                <span className="icon is-small">
+                                    <i className="fas fa-times" />
+                                </span>
+                            </button>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+            <div className="field">
+                <div className="control">
+                    <button
+                        className="button is-small is-primary"
+                        type="button"
+                        onClick={() => {
+                            const updated = [..._enums, ""];
+                            setEnums(updated);
+                            onChange(updated);
+                        }}
+                    >
+                        <span className="icon is-small">
+                          <i className="fas fa-plus" />
+                        </span>
+                        <span>Add Enum</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EnumsEditor;