import { useSiteStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import FormCheck from "react-bootstrap/FormCheck"; import Modal from "react-bootstrap/Modal"; import ModalBody from "react-bootstrap/ModalBody"; import Stack from "react-bootstrap/Stack"; export default observer(() => { const { isConfigureOpened, setConfigureOpened, saveTraffic, setSaveTraffic, autoEnterNotify, setAutoEnterNotify, autoEnterDefault, setAutoEnterDefault, autoEnterPlatform, setAutoEnterPlatform, } = useSiteStore(); const t = useTranslations(); return ( <Modal show={isConfigureOpened} onHide={() => { window.localStorage.setItem("saveTraffic", saveTraffic.toString()); window.localStorage.setItem( "autoEnterNotify", autoEnterNotify.toString(), ); window.localStorage.setItem( "autoEnterDefault", autoEnterDefault.toString(), ); window.localStorage.setItem( "autoEnterPlatform", autoEnterPlatform.toString(), ); setConfigureOpened(false); }} > <ModalBody> <Stack gap={2}> <FormCheck id="saveTraffic" label={t("siteSaveTraffic")} checked={saveTraffic} onChange={() => { setSaveTraffic(!saveTraffic); }} /> <FormCheck id="autoEnterNotify" label={t("siteAutoEnterNotify")} checked={autoEnterNotify} onChange={() => { setAutoEnterNotify(!autoEnterNotify); }} /> <FormCheck id="autoEnterDefault" label={t("siteAutoEnterDefault")} checked={autoEnterDefault} onChange={() => { setAutoEnterDefault(!autoEnterDefault); }} /> <FormCheck id="autoEnterPlatform" label={t("siteAutoEnterPlatform")} checked={autoEnterPlatform} onChange={() => { setAutoEnterPlatform(!autoEnterPlatform); }} /> </Stack> </ModalBody> </Modal> ); });