DRY input settings

src/main.ts

@@ -96,6 +96,9 @@ const scene = sync({
   return scene
 })
 
+const input = (label: string, attrs: any) =>
+  ["div", {}, ["label", {}, label, ["input", attrs]]]
+
 $compile(
   ["div.container", {},
    ["main", {},
@@ -103,25 +106,22 @@ $compile(
     $canvas(scene, size)],
    ["aside", {},
     ["h2", {}, "Settings"],
-    ["div", {}, ["label", {}, "Grid size: ",
-                 ["input", {
+    input("Grid size: ", {
       type: "number",
       min: "5",
       value: cellSize.deref()!,
       oninput: $input(cellSize)
-                 }]]],
-    ["div", {}, ["label", {}, "X Pattern: ",
-                 ["input", {
+    }),
+    input("X Pattern: ", {
       type: "text",
       value: xs_,
       oninput: $input(xSeeds)
-                 }]]],
-    ["div", {}, ["label", {}, "Y Pattern: ",
-                 ["input", {
+    }),
+    input("Y Pattern: ", {
       type: "text",
       value: ys_,
       oninput: $input(ySeeds)
-                 }]]],
+    }),
     ["h2", {}, "SVG Export"],
     ["div", {}, ["textarea", {
       value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),