SB persist

Options page for GSX Sync
2025-06-18 23:57:46 +02:00
parent 4b60f8eec2
commit 390edd29b8
16 changed files with 316 additions and 135 deletions
@@ -0,0 +1,51 @@
+interface ToggleComponentProps<T> {
+  optionName: string;
+  value: T;
+  leftLabel: {
+    value: T;
+    label?: string;
+  };
+  rightLabel: {
+    value: T;
+    label?: string;
+  };
+  backgroundColor: string;
+  disabled?: boolean;
+  setValue: (value: T) => void;
+}
+
+const ToggleComponent = <T,>({
+  optionName,
+  value,
+  leftLabel,
+  rightLabel,
+  backgroundColor,
+  disabled,
+  setValue,
+}: ToggleComponentProps<T>) => {
+  return (
+    <div className="flex w-full items-center justify-between text-xs">
+      <span>{optionName}</span>
+      <div className="inline-flex w-1/2 rounded-md shadow-sm">
+        <button
+          type="button"
+          className={`${value === leftLabel.value ? 'bg-green-700' : backgroundColor} w-1/2 rounded-l-lg border border-white px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50`}
+          onClick={() => setValue(leftLabel.value)}
+          disabled={disabled}
+        >
+          {leftLabel.label || 'Enabled'}
+        </button>
+        <button
+          type="button"
+          className={`${value === rightLabel.value ? 'bg-green-700' : backgroundColor} w-1/2 rounded-r-md border border-white px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50`}
+          onClick={() => setValue(rightLabel.value)}
+          disabled={disabled}
+        >
+          {rightLabel.label || 'Disabled'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ToggleComponent;