63 lines
2.0 KiB

import React from "react";
import { connect } from "react-redux";
import { dialog } from "../../redux/actions";
export const Dialog = ({ dialog, setDialog }) => {
const { text, type, accept } = dialog;
return (
<div
className="z-50 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm flex justify-center items-center"
onClick={() => setDialog({ ...dialog, open: !dialog.open })}
>
<div
className={`flex flex-col items-center bg-white dark:bg-black dark:bg-opacity-30 backdrop-filter backdrop-blur-xl rounded-md p-5 shadow-2xl`}
style={{ minWidth: 300 }}
>
{/* {type === "confirm" && (
<div className="w-full flex justify-end text-sm text-bla">exit</div>
)} */}
<p
className={`text-tiny text-gray70 dark:text-white w-full mb-8 leading-7`}
>
{text}
</p>
{type === "confirm" && (
<div className="flex flex-row gap-4 w-full">
<button
className="py-2.5 w-1/2 shadow-md rounded-sm bg-blueC0 text-white"
onClick={() => accept()}
>
باشه
</button>
<button
className="py-2.5 w-1/2 shadow-md rounded-sm bg-redFF1 text-white"
onClick={() => setDialog({ ...dialog, open: !dialog.open })}
>
بیخیال
</button>
</div>
)}
{type === "alert" && (
<div className="flex flex-row gap-4 w-full">
<button
className="py-2.5 w-full shadow-md rounded-sm bg-blue-400 text-white"
onClick={() => setDialog({ ...dialog, open: !dialog.open })}
>
باشه
</button>
</div>
)}
</div>
</div>
);
};
const mapStateToProps = (state) => ({
dialog: state.dialog.dialog,
});
const mapDispatchToProps = {
setDialog: dialog.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(Dialog);