opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update clear data modal in setting

Browse Source
This commit is contained in:
steven
2023-03-30 11:01:05 +08:00
parent 332bf9eb04
commit fe100fdf12
2 changed files with 45 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/SettingModal.tsx
View File

@ -1,68 +1,45 @@
import { useState } from "react";
import { createPortal } from "react-dom";
import Icon from "./Icon";
import WeChatQRCodeView from "./WeChatQRCodeView";
import ClearDataConfirmModal from "./ClearDataConfirmModal";
import ClearDataButton from "./ClearDataButton";
interface Props {
show: boolean;
close: () => void;
}
interface State {
showClearDataConfirmModal: boolean;
}
const SettingModal = (props: Props) => {
const { show, close } = props;
const [state, setState] = useState<State>({
showClearDataConfirmModal: false,
});
const toggleClearDataConfirmModal = (show = true) => {
setState({
...state,
showClearDataConfirmModal: show,
});
};
return (
<>
<div className={`modal modal-middle ${show && "modal-open"}`}>
<div className="modal-box relative">
<h3 className="font-bold text-lg">Setting</h3>
<button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
<Icon.IoMdClose className="w-5 h-auto" />
</button>
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
<div className="w-full flex flex-row justify-start items-start flex-wrap">
<a
href="https://discord.gg/6R3qb32h"
className="w-auto px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium flex flex-row justify-center items-center mr-2 mb-2 hover:underline hover:shadow"
target="_blank"
>
<Icon.BsDiscord className="w-4 h-auto mr-1" />
Join Discord Channel
</a>
<WeChatQRCodeView />
</div>
<div className={`modal modal-middle ${show && "modal-open"}`}>
<div className="modal-box relative">
<h3 className="font-bold text-lg">Setting</h3>
<button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
<Icon.IoMdClose className="w-5 h-auto" />
</button>
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
<div className="w-full flex flex-row justify-start items-start flex-wrap">
<a
href="https://discord.gg/6R3qb32h"
className="w-auto px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium flex flex-row justify-center items-center mr-2 mb-2 hover:underline hover:shadow"
target="_blank"
>
<Icon.BsDiscord className="w-4 h-auto mr-1" />
Join Discord Channel
</a>
<WeChatQRCodeView />
</div>
<h3>Danger Zone</h3>
<div className="w-full border border-red-200 p-4 rounded-lg">
<div className="w-full flex flex-row justify-between items-center gap-2">
<span>Clear all data</span>
<button className="btn btn-sm btn-error" onClick={() => toggleClearDataConfirmModal(true)}>
Clear
</button>
</div>
<h3>Danger Zone</h3>
<div className="w-full border border-red-200 p-4 rounded-lg">
<div className="w-full flex flex-row justify-between items-center gap-2">
<span>Clear all data</span>
<ClearDataButton />
</div>
</div>
</div>
</div>
{state.showClearDataConfirmModal &&
createPortal(<ClearDataConfirmModal close={() => toggleClearDataConfirmModal(false)} />, document.body)}
</>
</div>
);
};