Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-05-01 02:19:41 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: mobile menu page instead of dropdown for authorized user

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-21 01:54:02 +05:00
parent 3ab5954197
commit 75eb4a3170
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 327 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

95
app/components/SettingsModal/SettingsModal.tsx Normal file
View file

@ -0,0 +1,95 @@
"use client";
import { usePreferencesStore } from "#/store/preferences";
import {
Modal,
Button,
useThemeMode,
ToggleSwitch,
} from "flowbite-react";
export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
const preferenceStore = usePreferencesStore();
const { computedMode, setMode } = useThemeMode();
return (
<Modal
dismissible
show={props.isOpen}
onClose={() => props.setIsOpen(false)}
>
<Modal.Header>Настройки</Modal.Header>
<Modal.Body>
<div className="space-y-6">
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white">Тема</p>
<Button.Group>
<Button
color={computedMode == "light" ? "blue" : "gray"}
onClick={() => setMode("light")}
>
Светлая
</Button>
<Button
color={computedMode == "dark" ? "blue" : "gray"}
onClick={() => setMode("dark")}
>
Темная
</Button>
</Button.Group>
</div>
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white">
Показывать список изменений
</p>
<ToggleSwitch
color="blue"
theme={{
toggle: {
checked: {
color: {
blue: "border-blue-700 bg-blue-700",
},
},
},
}}
onChange={() =>
preferenceStore.setFlags({
showChangelog: !preferenceStore.flags.showChangelog,
})
}
checked={preferenceStore.flags.showChangelog}
/>
</div>
<div className="flex items-center justify-between">
<div>
<p className="font-bold dark:text-white">Отправка аналитики</p>
<p className="text-gray-500 dark:text-gray-400">
Требуется перезагрузка для применения
</p>
</div>
<ToggleSwitch
color="blue"
theme={{
toggle: {
checked: {
color: {
blue: "border-blue-700 bg-blue-700",
},
},
},
}}
onChange={() =>
preferenceStore.setFlags({
enableAnalytics: !preferenceStore.flags.enableAnalytics,
})
}
checked={preferenceStore.flags.enableAnalytics}
/>
</div>
</div>
</Modal.Body>
</Modal>
);
};