modem settings management: integrate ModemSettings and ModemToggle components, update hooks for modem configuration, and enhance WiFiSettingsForm submission handling.

src/components/SettingForms/WiFi&Modem/ModemToggle.tsx

@@ -0,0 +1,30 @@
+type ModemToggleProps = {
+  showSettings: boolean;
+  onShowSettings: (showSettings: boolean) => void;
+};
+
+const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => {
+  return (
+    <div className=" text-xl items-center m-2">
+      <label className="flex flex-row space-x-2 items-center w-[70%] md:w-[50%]">
+        <span>Automatically set</span>
+        <input
+          name="advancedSettings"
+          type="checkbox"
+          checked={showSettings}
+          onChange={(e) => onShowSettings(e.target.checked)}
+          id="advancedSettings"
+          className="sr-only peer"
+          value=""
+        />
+        <div
+          className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+        ></div>
+      </label>
+    </div>
+  );
+};
+
+export default ModemToggle;