Add width option to page menu

This commit is contained in:
Philipinho
2024-07-03 11:23:42 +01:00
parent 8f056d1071
commit e824aeced7
2 changed files with 20 additions and 4 deletions

View File

@ -1,4 +1,4 @@
import { Group, Text, Switch } from "@mantine/core";
import { Group, Text, Switch, MantineSize } from "@mantine/core";
import { useAtom } from "jotai/index";
import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
import { updateUser } from "@/features/user/services/user-service.ts";
@ -14,12 +14,16 @@ export default function PageWidthPref() {
</Text>
</div>
<WidthToggle />
<PageWidthToggle />
</Group>
);
}
function WidthToggle() {
interface PageWidthToggleProps {
size?: MantineSize;
label?: string;
}
export function PageWidthToggle({ size, label }: PageWidthToggleProps) {
const [user, setUser] = useAtom(userAtom);
const [checked, setChecked] = useState(
user.settings?.preferences?.fullPageWidth,
@ -34,6 +38,9 @@ function WidthToggle() {
return (
<Switch
size={size}
label={label}
labelPosition="left"
defaultChecked={checked}
onChange={handleChange}
aria-label="Toggle full page width"