design dark mode turns & add-doctor & account & layout and components MUI

components/panel/userAccount/Head.js

@@ -1,9 +1,7 @@
 "use client";
 
+import UploadFile from "@/app/component/UploadFile";
 import { useRef } from "react";
-import { Button } from "@mui/material";
-import ProfileP from "@/components/icons/ProfileP";
-import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
 function Head() {
   const fileRef = useRef();
@@ -12,21 +10,7 @@ function Head() {
 
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <input className="contents" ref={fileRef} type="file" />
-      <div
-        className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
-        onClick={() => openInput()}
-      >
-        <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>
+      <UploadFile fileRef={fileRef} openInput={openInput} />
     </div>
   );
 }