2 files changed, 67 insertions, 0 deletions
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
new file mode 100644
index 0000000..9b6c229
--- /dev/null
+++ b/src/settings/components/ui/input.jsx
@@ -0,0 +1,50 @@
+import { h, Component } from 'preact';
+import './input.scss';
+
+class Input extends Component {
+
+  renderRadio(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label>
+        <input className={ inputClasses } type='radio' {...props} />
+        { props.label }
+      </label>
+    </div>;
+  }
+
+  renderTextArea(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label
+        className='form-field-label'
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <textarea className={inputClasses} {...props} />
+
+      <p className='form-field-error'>{ this.props.error }</p>
+    </div>;
+  }
+
+  render() {
+    let { type } = this.props;
+
+    switch (this.props.type) {
+    case 'radio':
+      return this.renderRadio(this.props);
+    case 'textarea':
+      return this.renderTextArea(this.props);
+    default:
+      console.warn(`Unsupported input type ${type}`);
+    }
+    return null;
+  }
+}
+
+export default Input;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
new file mode 100644
index 0000000..6187138
--- /dev/null
+++ b/src/settings/components/ui/input.scss
@@ -0,0 +1,17 @@
+.form-field-label {
+  font-weight: bold
+}
+
+.form-field-error {
+  font-weight: bold;
+  color: red;
+  min-height: 1.5em;
+}
+
+.form-field-input {
+  padding: 4px;
+}
+
+.form-field-input.input-error {
+  box-shadow: 0 0 2px red;
+}