tutu/src/settings/Motions.tsx
2024-11-16 20:04:55 +08:00

89 lines
2.6 KiB
TypeScript

import type { Component } from "solid-js";
import Scaffold from "../material/Scaffold";
import {
AppBar,
Divider,
IconButton,
List,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
Switch,
Toolbar,
} from "@suid/material";
import { Title } from "../material/typography";
import { ArrowBack } from "@suid/icons-material";
import { createTranslator } from "../platform/i18n";
import { useStore } from "@nanostores/solid";
import { $settings } from "./stores";
import { useNavigator } from "../platform/StackedRouter";
const Motions: Component = () => {
const {pop} = useNavigator();
const [t] = createTranslator(
(code) =>
import(`./i18n/${code}.json`) as Promise<{
default: Record<string, string | undefined>;
}>,
);
const settings = useStore($settings);
return (
<Scaffold
topbar={
<AppBar position="static">
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[pop, 1]} disableRipple>
<ArrowBack />
</IconButton>
<Title>{t("motions")}</Title>
</Toolbar>
</AppBar>
}
>
<List
sx={{
paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
}}
>
<li>
<ul style={{ "padding-left": 0 }}>
<ListSubheader>{t("motions.gifs")}</ListSubheader>
<ListItemButton
onClick={() =>
$settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
}
>
<ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
<ListItemSecondaryAction>
<Switch checked={settings().autoPlayGIFs}></Switch>
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
</ul>
</li>
<li>
<ul style={{ "padding-left": 0 }}>
<ListSubheader>{t("motions.vids")}</ListSubheader>
<ListItemButton
onClick={() =>
$settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
}
>
<ListItemText>{t("motions.vids.autoplay")}</ListItemText>
<ListItemSecondaryAction>
<Switch checked={settings().autoPlayVideos}></Switch>
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
</ul>
</li>
</List>
</Scaffold>
);
};
export default Motions;