design dashboard comments & messages & modals

2024-09-04 03:00:36 +03:30
parent bc47663002
commit 52a745fcb8
34 changed files with 669 additions and 128 deletions
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import TrashOrangeD from '@/components/icons/TrashOrangeD';
+import { Box, Button, Modal } from '@mui/material';
+import { styleDefault } from '@/mui';
+import CloseModalD from '@/components/icons/CloseModalD';
+
+function ModalDeleteComment() {
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div>
+            {/* Button Modal */}
+            <Button
+                className="!gap-[5px] !p-1 !text-[#F17732] !text-[14px] !font-medium"
+                onClick={handleOpen}
+                variant="text"
+            >
+                <TrashOrangeD />
+                حذف نظر
+            </Button>
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box
+                    sx={styleDefault}
+                    className="!w-full md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+                >
+                    <div className='flex items-center justify-between w-full'>
+                        <p className='text-[#3B3B3B] text-[20px] font-medium'>حذف نظر</p>
+                        <Button
+                            onClick={handleClose}
+                            className='!p-1'
+                            variant='text'
+                        >
+                            <CloseModalD />
+                        </Button>
+                    </div>
+                    <span className='block h-px w-full bg-[#EFEFEF] my-[16px]'></span>
+                    <p className='text-[#525252] text-[16px] font-normal'>آیا این نظر حذف شود؟</p>
+                    <div className='flex items-center justify-end gap-[16px]'>
+                        <Button
+                            variant='outlined'
+                            onClick={handleClose}
+                            className='!py-[8px] !px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
+                        >
+                            انصراف
+                        </Button>
+                        <Button
+                            variant='contained'
+                            onClick={handleClose}
+                            className='!py-[8px] !px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
+                        >
+                            حذف نظر
+                        </Button>
+                    </div>
+                </Box>
+            </Modal>
+        </div>
+    )
+}
+
+export default ModalDeleteComment