opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-30 10:43:06 +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

20
components/ClearDataButton.tsx Normal file
View File

@ -0,0 +1,20 @@
import { useState } from "react";
import { createPortal } from "react-dom";
import ClearDataConfirmModal from "./ClearDataConfirmModal";
const ClearDataButton = () => {
const [showClearDataConfirmModal, setShowClearDataConfirmModal] = useState(false);
return (
<>
<button className="btn btn-sm btn-error" onClick={() => setShowClearDataConfirmModal(true)}>
Clear
</button>
{showClearDataConfirmModal &&
createPortal(<ClearDataConfirmModal close={() => setShowClearDataConfirmModal(false)} />, document.body)}
</>
);
};
export default ClearDataButton;

73
components/SettingModal.tsx
View File

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