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", {
-                   type: "number",
-                   min: "5",
-                   value: cellSize.deref()!,
-                   oninput: $input(cellSize)
-                 }]]],
-    ["div", {}, ["label", {}, "X Pattern: ",
-                 ["input", {
-                   type: "text",
-                   value: xs_,
-                   oninput: $input(xSeeds)
-                 }]]],
-    ["div", {}, ["label", {}, "Y Pattern: ",
-                 ["input", {
-                   type: "text",
-                   value: ys_,
-                   oninput: $input(ySeeds)
-                 }]]],
+    input("Grid size: ", {
+      type: "number",
+      min: "5",
+      value: cellSize.deref()!,
+      oninput: $input(cellSize)
+    }),
+    input("X Pattern: ", {
+      type: "text",
+      value: xs_,
+      oninput: $input(xSeeds)
+    }),
+    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))),