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,51 @@
+import { Button } from "@mui/material";
+import { useState } from "react";
+import Cropper from "react-easy-crop";
+import { cropImage } from "./cropImg";
+
+function Crop({ data, uploadImg, handleClose }) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+
+  const onComplete = (imagePromisse) =>
+    imagePromisse.then((image) => uploadImg(image));
+
+  return (
+    <div className="mt-[16px]">
+      <div className="px-[24px]">
+        <div className="relative w-[424px] h-[380px] rounded-[8px] overflow-hidden">
+          <Cropper
+            crop={crop}
+            zoom={zoom}
+            aspect={4 / 3}
+            image={data.blob}
+            onCropChange={setCrop}
+            onCropComplete={(_, croppedAreaPixels) =>
+              setCroppedAreaPixels(croppedAreaPixels)
+            }
+            onZoomChange={setZoom}
+          />
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-[16px] mt-[16px]">
+        <Button
+          variant="outlined"
+          onClick={handleClose}
+          className="!text-[16px] !max-w-[calc(50%_-_8px)] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none"
+        >
+          انصراف
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => onComplete(cropImage(data.blob, croppedAreaPixels))}
+          className="!text-[16px] !max-w-[calc(50%_-_8px)] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px]"
+        >
+          ذخیره
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default Crop;