= (props) => (
+
+
+
+ {props.tooltip}
+
+
+);
diff --git a/src/components/common/Editor.tsx b/src/components/common/Editor.tsx
new file mode 100644
index 0000000..c4d8b6f
--- /dev/null
+++ b/src/components/common/Editor.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import AceEditor from 'react-ace';
+
+import 'ace-builds/src-noconflict/mode-json';
+import 'ace-builds/src-noconflict/theme-textmate';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import 'ace-builds/src-noconflict/snippets/json';
+
+interface Editor {
+ code: string;
+ onChange: (code: string) => void;
+}
+
+const Editor = ({ code, onChange }: Editor): JSX.Element => (
+
+);
+
+export default Editor;
diff --git a/src/components/common/Inputs.tsx b/src/components/common/Inputs.tsx
new file mode 100644
index 0000000..b4c477d
--- /dev/null
+++ b/src/components/common/Inputs.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+interface Input {
+ value: any;
+ onChange: (value: string) => void;
+
+ type?: string;
+ className?: string;
+ placeholder?: string;
+}
+
+export const Input = ({ value, onChange, type = 'text', className = '', placeholder = '' }: Input): JSX.Element => (
+ onChange(event.target.value)}
+ className={`focus:ring-indigo-500 focus:border-indigo-500 inline-block sm:text-sm border-gray-300 rounded-md ${className}`}
+ />
+);
+
+interface Label {
+ name: string;
+ htmlFor?: string;
+ className?: string;
+}
+
+export const Label = ({ name, className = '', htmlFor = '' }: Label): JSX.Element => (
+
+);
+
+interface LabeledInput extends Input {
+ labelName: string;
+}
+
+export const LabelInput = ({
+ value,
+ labelName,
+ onChange,
+ className = '',
+ placeholder = '',
+}: LabeledInput): JSX.Element => (
+
+
+
+
+);
+
+interface Checkbox {
+ value: boolean;
+ onChange: () => void;
+}
+
+export const Checkbox = ({ value, onChange }: Checkbox): JSX.Element => (
+
+);
+
+interface Textarea {
+ value: string;
+ onChange: (value: string) => void;
+}
+
+export const Textarea = ({ value, onChange }: Textarea): JSX.Element => (
+