basic style step page add-doctor

components/panel/addDoctor/index.js

@@ -11,6 +11,7 @@ import OfficeInformation from "./listMenu/officeInformation";
 import GeneralInformation from "./listMenu/generalInformation";
 import ArrowRightPH from "@/components/icons/ArrowRightPH";
 import { Button } from "@mui/material";
+import Step from "./Step";
 
 const listTab = [
   "اطلاعات عمومی",
@@ -39,30 +40,9 @@ function AddDoctorPage() {
       <p className="text-[#525252] dark:text-[#D7D8ED] text-[20px] font-bold hidden md:flex">
         پروفایل من
       </p>
-      <Button
-        onClick={() => setOpen(true)}
-        className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
-      >
-        <ArrowRightPH />
-        <p className="text-[#525252] text-[14px] font-bold dark:text-[#a1a1a1]">
-          {listTab[value]}
-        </p>
-      </Button>
       <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]">
-        <ListMenu
-          open={open}
-          value={value}
-          listTab={listTab}
-          setOpen={setOpen}
-          handleChange={handleChange}
-        />
-        <div
-          className={`mt-[24px] ${
-            value !== 4 ? "mx-0 md:-[14px] lg:mx-[26px] xl:mx-[56px]" : "mx-0"
-          }`}
-        >
-          {components[value]}
-        </div>
+        <Step value={value} />
+        {components[value]}
       </div>
     </div>
   );