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,71 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Button } from "@mui/material";
+import ProfileP from "@/components/icons/ProfileP";
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+import { uploadImage } from "@/helper";
+import ModalUpload from "./ModalUpload";
+import Image from "next/image";
+
+function UploadFile({ image, setImage }) {
+  const fileRef = useRef();
+
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState();
+
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+
+  const openInput = () => fileRef.current.click();
+  const handleChange = async (event) => {
+    const result = await uploadImage(event);
+    handleOpen();
+    setData(result);
+  };
+
+  const uploadImg = (prop) => {
+    setImage(prop);
+    handleClose();
+  };
+
+  return (
+    <>
+      <ModalUpload
+        open={open}
+        data={data}
+        uploadImg={uploadImg}
+        handleClose={handleClose}
+      />
+      <input
+        type="file"
+        ref={fileRef}
+        className="contents"
+        onChange={handleChange}
+      />
+      {image ? (
+        <Image
+          width={24}
+          height={24}
+          src={image}
+          alt="img-uploaded"
+          className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
+        />
+      ) : (
+        <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
+          <ProfileP />
+        </div>
+      )}
+      <Button
+        variant="text"
+        onClick={openInput}
+        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
+      >
+        انتخاب تصویر
+        <ArrowLeftPU />
+      </Button>
+    </>
+  );
+}
+
+export default UploadFile;