refactor: extract defaultPositionType select into new Select component

src/components/Form.tsx

@@ -7,6 +7,7 @@ import {
   FlowComponent,
   createSignal,
   createEffect,
+  For,
 } from "solid-js";
 import { validateInput } from "~/hooks/validation";
 import AsteriskIcon from "~icons/ph/asterisk-bold";
@@ -245,3 +246,55 @@ export const NumberInput: Component<
     />
   );
 };
+
+// TODO: Move input-group into separate component
+
+export const Select: Component<
+  {
+    value: string | number;
+    options: [string | number, string][];
+    label: string;
+    labelMinWidth?: string;
+    onChange: (v: any) => void;
+  } & JSX.InputHTMLAttributes<HTMLSelectElement>
+> = (p) => {
+  p = mergeProps(
+    {
+      labelMinWidth: "95px",
+    },
+    p
+  );
+  const [props, rest] = splitProps(p, [
+    "value",
+    "options",
+    "label",
+    "labelMinWidth",
+    "onChange",
+  ]);
+
+  return (
+    <div class="shrink form-control">
+      <div class="input-group input-group-sm">
+        <span
+          class="bg-slate-200/70"
+          style={{ "min-width": props.labelMinWidth }}
+        >
+          {props.label}
+        </span>
+        <select
+          class="flex-1 select select-sm select-bordered"
+          onChange={(e) => props.onChange(e.currentTarget.value)}
+          {...rest}
+        >
+          <For each={props.options}>
+            {([type, label]) => (
+              <option selected={type === props.value} value={type}>
+                {label}
+              </option>
+            )}
+          </For>
+        </select>
+      </div>
+    </div>
+  );
+};

src/components/Settings/Overlay.tsx

@@ -22,6 +22,7 @@ import createAccordion from "../Accordion";
 import {
   Checkbox,
   NumberInput,
+  Select,
   TextArea,
   TextInput,
   UnixDateInput,
@@ -311,40 +312,19 @@ const SettingsOverlay: Component = () => {
                     />
                   </div>
                   <div class="col-span-2">
-                    <div class="input-group input-group-sm">
-                      <span
-                        class="bg-slate-200/70"
-                        style={{ "min-width": fullWidthLabelWidth }}
-                      >
-                        Typ neuer Positionen
-                      </span>
-                      <select
-                        title="Neue Positionen werden mit diesem Typen erzeugt."
-                        class="flex-1 select select-sm select-bordered"
-                        onChange={(e) =>
-                          setState(
-                            "defaultPositionType",
-                            e.currentTarget.value as any
-                          )
-                        }
-                      >
-                        <For
-                          each={[
-                            [POSITION_TYPE_QUANTITY, "Menge"],
-                            [POSITION_TYPE_AGILE, "Agile"],
-                          ]}
-                        >
-                          {([type, label]) => (
-                            <option
-                              selected={type === state.defaultPositionType}
-                              value={type}
-                            >
-                              {label}
-                            </option>
-                          )}
-                        </For>
-                      </select>
-                    </div>
+                    <Select
+                      label="Typ neuer Positionen"
+                      labelMinWidth={fullWidthLabelWidth}
+                      title="Neue Positionen werden mit diesem Typen erzeugt."
+                      value={state.defaultPositionType}
+                      options={[
+                        [POSITION_TYPE_QUANTITY, "Menge"],
+                        [POSITION_TYPE_AGILE, "Agile"],
+                      ]}
+                      onChange={(v) =>
+                        setState("defaultPositionType", v as any)
+                      }
+                    />
                   </div>
 
                   <div class="col-span-2">