design modal crop & handle crop image

2024-10-25 22:16:00 +03:30
parent e874284bb6
commit 638d0d78f5
11 changed files with 193 additions and 56 deletions
@@ -0,0 +1,29 @@
+import CloseModalD from "@/components/icons/CloseModalD";
+import { styleDefault } from "@/mui";
+import { Box, Modal } from "@mui/material";
+import Crop from "./Crop";
+
+function ModalUpload({ open, handleClose, data, uploadImg }) {
+  return (
+    <Modal open={open} onClose={handleClose} className="!hidden md:!flex">
+      <Box
+        sx={styleDefault}
+        className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
+            dark:!bg-[#222433] dark:!shadow-none !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
+            !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] dark:!border-transparent"
+      >
+        <div className="flex items-center justify-between">
+          <p className="text-[#3B3B3B] dark:text-[#DBDBDB] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
+            برش عکس
+          </p>
+          <div className="cursor-pointer" onClick={handleClose}>
+            <CloseModalD />
+          </div>
+        </div>
+        <Crop data={data} uploadImg={uploadImg} handleClose={handleClose} />
+      </Box>
+    </Modal>
+  );
+}
+
+export default ModalUpload;