extract plus minus to own component

1 files changed, 72 insertions, 0 deletions

diff --git a/src/components/FpsMultiplierControl.tsx b/src/components/FpsMultiplierControl.tsx
new file mode 100644
index 0000000..da73fea
--- /dev/null
+++ b/src/components/FpsMultiplierControl.tsx
@@ -0,0 +1,72 @@
+import { PanelSectionRow, DialogButton, Focusable } from "@decky/ui";
+import { ConfigurationData } from "../config/configSchema";
+import { MULTIPLIER } from "../config/generatedConfigSchema";
+
+interface FpsMultiplierControlProps {
+  config: ConfigurationData;
+  onConfigChange: (fieldName: keyof ConfigurationData, value: boolean | number | string) => Promise<void>;
+}
+
+export function FpsMultiplierControl({
+  config,
+  onConfigChange
+}: FpsMultiplierControlProps) {
+  return (
+    <PanelSectionRow>
+      <Focusable
+        style={{
+          marginTop: "10px",
+          marginBottom: "10px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }}
+        flow-children="horizontal"
+      >
+        <DialogButton
+          style={{
+            marginLeft: "0px",
+            height: "30px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "5px 0px 0px 0px",
+            minWidth: "40px",
+          }}
+          onClick={() => onConfigChange(MULTIPLIER, Math.max(1, config.multiplier - 1))}
+          disabled={config.multiplier <= 1}
+        >
+          −
+        </DialogButton>
+        <div
+          style={{
+            marginLeft: "20px",
+            marginRight: "20px",
+            fontSize: "16px",
+            fontWeight: "bold",
+            color: "white",
+            minWidth: "60px",
+            textAlign: "center"
+          }}
+        >
+          {config.multiplier < 2 ? "OFF" : `${config.multiplier}X`}
+        </div>
+        <DialogButton
+          style={{
+            marginLeft: "0px",
+            height: "30px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "5px 0px 0px 0px",
+            minWidth: "40px",
+          }}
+          onClick={() => onConfigChange(MULTIPLIER, Math.min(6, config.multiplier + 1))}
+          disabled={config.multiplier >= 6}
+        >
+          +
+        </DialogButton>
+      </Focusable>
+    </PanelSectionRow>
+  );
+}