extract plus minus to own component

3 files changed, 77 insertions, 59 deletions

diff --git a/src/components/ConfigurationSection.tsx b/src/components/ConfigurationSection.tsx
index 1a0107c..778ebc8 100644
--- a/src/components/ConfigurationSection.tsx
+++ b/src/components/ConfigurationSection.tsx
@@ -1,7 +1,8 @@
-import { PanelSectionRow, ToggleField, SliderField, DropdownItem, DialogButton, Focusable } from "@decky/ui";
+import { PanelSectionRow, ToggleField, SliderField, DropdownItem } from "@decky/ui";
 import { ConfigurationData } from "../config/configSchema";
+import { FpsMultiplierControl } from "./FpsMultiplierControl";
 import {
-  MULTIPLIER, FLOW_SCALE, PERFORMANCE_MODE, HDR_MODE, 
+  FLOW_SCALE, PERFORMANCE_MODE, HDR_MODE, 
   EXPERIMENTAL_PRESENT_MODE, DXVK_FRAME_RATE, DISABLE_STEAMDECK_MODE,
   MANGOHUD_WORKAROUND, DISABLE_VKBASALT
 } from "../config/generatedConfigSchema";
@@ -34,63 +35,7 @@ export function ConfigurationSection({
       </PanelSectionRow>
 
       {/* FPS Multiplier */}
-
-      <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>
+      <FpsMultiplierControl config={config} onConfigChange={onConfigChange} />
 
       <PanelSectionRow>
         <SliderField
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>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index e4568f1..4c94958 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,6 +2,7 @@ export { Content } from "./Content";
 export { StatusDisplay } from "./StatusDisplay";
 export { InstallationButton } from "./InstallationButton";
 export { ConfigurationSection } from "./ConfigurationSection";
+export { FpsMultiplierControl } from "./FpsMultiplierControl";
 export { UsageInstructions } from "./UsageInstructions";
 export { WikiButton } from "./WikiButton";
 export { SmartClipboardButton } from "./SmartClipboardButton";