1 files changed, 54 insertions, 0 deletions
diff --git a/src/lib/form.ts b/src/lib/form.ts
new file mode 100644
index 0000000..04a2654
--- /dev/null
+++ b/src/lib/form.ts
@@ -0,0 +1,54 @@
+import { h } from 'lib/h'
+import * as Layout from 'lib/layout'
+import * as Button from 'lib/button'
+
+interface InputParams {
+  label: string,
+  attrs: object,
+}
+
+export function input({ label, attrs }: InputParams): Element {
+  return h('label',
+    { className: 'g-Form__Field' },
+    label,
+    h('input', attrs),
+  )
+}
+
+interface ColorInputParams {
+  colors: string[],
+  label: string,
+  initValue: string,
+  onInput: (value: string) => void,
+}
+
+export function colorInput({ colors, label, initValue, onInput }: ColorInputParams): Element {
+  const input = h('input',
+    { value: initValue,
+      type: 'color',
+      oninput: (e: Event) => {
+        if (e.target !== null) {
+          onInput((e.target as HTMLInputElement).value)
+        }
+      }
+    }
+  ) as HTMLInputElement
+  return h('label',
+    { className: 'g-Form__Field' },
+    label,
+    Layout.line(
+      {},
+      input,
+      ...colors.map(color =>
+        Button.raw({ className: 'g-Form__Color',
+          style: `background-color: ${color}`,
+          type: 'button',
+          onclick: () => {
+            input.value = color
+            onInput(color)
+          }
+        })
+      )
+    )
+  )
+}