change components element

app/component/UploadFile.js

@@ -1,10 +1,15 @@
 "use client";
 
+import { useRef } from "react";
 import { Button } from "@mui/material";
 import ProfileP from "@/components/icons/ProfileP";
 import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
 
-function UploadFile({ fileRef, openInput }) {
+function UploadFile() {
+  const fileRef = useRef();
+
+  const openInput = () => fileRef.current.click();
+
   return (
     <>
       <input className="contents" ref={fileRef} type="file" />

components/panel/addDoctor/index.js

@@ -46,9 +46,13 @@ function AddDoctorPage() {
       <p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
         پروفایل من
       </p>
-      <div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] md:dark:bg-[#222433] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-none pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
+      <div
+        className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] 
+        md:dark:bg-[#222433] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-none pt-0 
+        md:pt-[30px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]"
+      >
         <Step value={value} />
-        <div className="mt-[32px] px-[60px]">{components[value]}</div>
+        <div className="mt-[32px] px-[56px]">{components[value]}</div>
       </div>
     </div>
   );

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

@@ -1,14 +1,9 @@
 import UploadFile from "@/app/component/UploadFile";
-import { useRef } from "react";
 
 function Head() {
-  const fileRef = useRef();
-
-  const openInput = () => fileRef.current.click();
-
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <UploadFile fileRef={fileRef} openInput={openInput} />
+      <UploadFile />
     </div>
   );
 }

components/panel/userAccount/account/Head.js

@@ -1,16 +1,11 @@
 "use client";
 
 import UploadFile from "@/app/component/UploadFile";
-import { useRef } from "react";
 
 function Head() {
-  const fileRef = useRef();
-
-  const openInput = () => fileRef.current.click();
-
   return (
     <div className="flex items-center justify-center md:justify-start gap-[10px]">
-      <UploadFile fileRef={fileRef} openInput={openInput} />
+      <UploadFile />
     </div>
   );
 }