opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-28 02:24:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement Dialog kit component

Browse Source
This commit is contained in:
Steven
2023-04-11 23:07:18 +08:00
parent 42a4194d10
commit bcd7bece81
10 changed files with 308 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ActionConfirmModal.tsx
View File

@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import Icon from "./Icon";
import Dialog from "./kit/Dialog";
export interface ActionConfirmModalProps {
title: string;
@ -14,31 +14,25 @@ const ActionConfirmModal = (props: ActionConfirmModalProps) => {
const { t } = useTranslation();
return (
<div className="modal modal-middle modal-open">
<div className="modal-box relative">
<h3 className="font-bold text-lg">{title}</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">
<p className="text-gray-500">{content}</p>
</div>
<div className="modal-action">
<button className="btn btn-outline" onClick={close}>
{t("common.close")}
</button>
<button
className={`btn ${confirmButtonStyle}`}
onClick={() => {
confirm();
close();
}}
>
{t("common.confirm")}
</button>
</div>
<Dialog title={title} onClose={close}>
<div className="w-full flex flex-col justify-start items-start mt-2">
<p className="text-gray-500">{content}</p>
</div>
</div>
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
<button className="btn btn-outline" onClick={close}>
{t("common.close")}
</button>
<button
className={`btn ${confirmButtonStyle}`}
onClick={() => {
confirm();
close();
}}
>
{t("common.confirm")}
</button>
</div>
</Dialog>
);
};