design modal crop & handle crop image

components/home/search/index.js

@@ -54,7 +54,6 @@ function SearchBar() {
           <SearchD />
         </div>
       </Button>
-      {/* <AlertMsg /> */}
     </ButtonGroup>
   );
 }

components/panel/addDoctor/listMenu/generalInformation/Head.js

@@ -1,11 +1,8 @@
-import UploadFile from "@/app/component/UploadFile";
+import UploadFile from "@/app/component/uploadFile";
 import { useState } from "react";
 
 function Head() {
-  const [image, setImage] = useState({
-    file: "",
-    blob: "",
-  });
+  const [image, setImage] = useState("");
 
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">

components/panel/userAccount/account/Head.js

@@ -1,13 +1,10 @@
 "use client";
 
-import UploadFile from "@/app/component/UploadFile";
+import UploadFile from "@/app/component/uploadFile";
 import { useState } from "react";
 
 function Head() {
-  const [image, setImage] = useState({
-    file: "",
-    blob: "",
-  });
+  const [image, setImage] = useState("");
 
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">