import AvatarTitle from "@/components/AvatarTitle"; import useWipeTotem from "@/query/useWipeTotem"; import { useTaehuiStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { Button, Col, Row } from "reactstrap"; import { useTo } from "taehui-ts/fe-utilities"; export default observer<{ avatarID: string; avatarName: string }>( ({ avatarID, avatarName }) => { const { totem, setAvatarCipher, setAutoLogIn } = useTaehuiStore(); const t = useTranslations(); const to = useTo(); const { mutateAsync: wipeTotem } = useWipeTotem(); return ( <Row className="g-0"> <AvatarTitle avatarID={avatarID} avatarName={avatarName}> <Row className="g-0"> <Col className="m-1" xs="auto"> <Button disabled={!avatarID} color="danger" onClick={async () => { await wipeTotem({ totem }); window.localStorage.removeItem("avatarID"); window.localStorage.removeItem("avatarCipher"); window.localStorage.removeItem("autoLogIn"); setAvatarCipher(""); setAutoLogIn(false); }} > {t("notLoggedIn")} </Button> </Col> <Col className="m-1" xs="auto"> <Button disabled={!avatarID} onClick={() => { to("/avatar"); }} > {t("doModifyAvatar")} </Button> </Col> </Row> </AvatarTitle> </Row> ); }, );