import { Modal, Button, Row, Col } from "reactstrap"; import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { useSiteStore } from "src/Stores"; export default observer(() => { const { isConfigureOpened, setConfigureOpened, audio, setAudio, saveData, setSaveData, autoEnterNotify, setAutoEnterNotify, autoEnterDefault, setAutoEnterDefault, autoEnterPlatform, setAutoEnterPlatform, } = useSiteStore(); const { t } = useTranslation(); return ( <Modal isOpen={isConfigureOpened} toggle={() => { window.localStorage.setItem("audio", audio.toString()); window.localStorage.setItem("saveData", saveData.toString()); window.localStorage.setItem( "autoEnterNotify", autoEnterNotify.toString() ); window.localStorage.setItem( "autoEnterDefault", autoEnterDefault.toString() ); window.localStorage.setItem( "autoEnterPlatform", autoEnterPlatform.toString() ); setConfigureOpened(false); }} centered > <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button color={audio ? "success" : "danger"} onClick={() => { setAudio(!audio); }} > {t("siteAudio")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color={saveData ? "success" : "danger"} onClick={() => { setSaveData(!saveData); }} > {t("siteSaveData")} </Button> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button color={autoEnterNotify ? "success" : "danger"} onClick={() => { setAutoEnterNotify(!autoEnterNotify); }} > {t("siteAutoEnterNotify")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color={autoEnterDefault ? "success" : "danger"} onClick={() => { setAutoEnterDefault(!autoEnterDefault); }} > {t("siteAutoEnterDefault")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color={autoEnterPlatform ? "success" : "danger"} onClick={() => { setAutoEnterPlatform(!autoEnterPlatform); }} > {t("siteAutoEnterPlatform")} </Button> </Col> </Row> </Modal> ); });