cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 style: update confirm dialog to use custom modal component

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-03-08 15:29:06 +07:00
parent cbda1cc652
commit 296e149391
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 16 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/frontend/src/components/shared/ConfirmDialog.tsx
View File

@ -1,16 +1,10 @@
import React from 'react'; import React from 'react';
import { color } from '@material-tailwind/react/types/components/button'; import { color } from '@material-tailwind/react/types/components/button';
import { import { Modal, ModalProps } from './Modal';
Typography, import { Button } from './Button';
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from '@material-tailwind/react';
type ConfirmDialogProp = { type ConfirmDialogProp = ModalProps & {
children: React.ReactNode; children: React.ReactNode;
dialogTitle: string; dialogTitle: string;
open: boolean; open: boolean;
@ -23,42 +17,24 @@ type ConfirmDialogProp = {
const ConfirmDialog = ({ const ConfirmDialog = ({
children, children,
dialogTitle, dialogTitle,
open,
handleOpen, handleOpen,
confirmButtonTitle, confirmButtonTitle,
handleConfirm, handleConfirm,
color, ...props
}: ConfirmDialogProp) => { }: ConfirmDialogProp) => {
return ( return (
<Dialog open={open} handler={handleOpen} placeholder={''}> <Modal {...props}>
<DialogHeader className="flex justify-between" placeholder={''}> <Modal.Content>
<Typography variant="h6" placeholder={''}> <Modal.Header>{dialogTitle}</Modal.Header>
{dialogTitle}{' '} <Modal.Body>{children}</Modal.Body>
</Typography> <Modal.Footer className="flex justify-start gap-2">
<Button <Button variant="tertiary" onClick={handleOpen}>
variant="outlined" Cancel
onClick={handleOpen} </Button>
className=" rounded-full" <Button onClick={handleConfirm}>{confirmButtonTitle}</Button>
placeholder={''} </Modal.Footer>
> </Modal.Content>
X </Modal>
</Button>
</DialogHeader>
<DialogBody placeholder={''}>{children}</DialogBody>
<DialogFooter className="flex justify-start gap-2" placeholder={''}>
<Button variant="outlined" onClick={handleOpen} placeholder={''}>
Cancel
</Button>
<Button
variant="gradient"
color={color}
onClick={handleConfirm}
placeholder={''}
>
{confirmButtonTitle}
</Button>
</DialogFooter>
</Dialog>
); );
}; };