Spaces:
Running
Running
File size: 1,365 Bytes
1e22bf6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import {
Stack,
Switch,
useComputedColorScheme,
useMantineColorScheme,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { usePubSub } from "create-pubsub/react";
import { settingsPubSub } from "../../../../modules/pubSub";
export default function InterfaceSettingsForm() {
const [settings, setSettings] = usePubSub(settingsPubSub);
const form = useForm({
initialValues: settings,
onValuesChange: setSettings,
});
const { setColorScheme } = useMantineColorScheme();
const computedColorScheme = useComputedColorScheme("light");
const toggleColorScheme = () => {
setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
};
return (
<Stack gap="md">
<Switch
label="Dark Mode"
checked={computedColorScheme === "dark"}
onChange={toggleColorScheme}
labelPosition="left"
description="Enable or disable the dark color scheme."
styles={{ labelWrapper: { width: "100%" } }}
/>
<Switch
{...form.getInputProps("enterToSubmit", {
type: "checkbox",
})}
label="Enter to Submit"
labelPosition="left"
description="Enable or disable using Enter key to submit the search query. When disabled, you'll need to click the Search button or use Shift+Enter to submit."
/>
</Stack>
);
}
|