basic style step page add-doctor

components/panel/addDoctor/Step.js

@@ -0,0 +1,40 @@
+import CalendarTick from "@/components/icons/CalendarTick";
+import LocationAdd from "@/components/icons/LocationAdd";
+import UserEdit from "@/components/icons/UserEdit";
+
+function Step({ value }) {
+  const list = [
+    { icon: <UserEdit active={value === 0} />, name: "اطلاعات عمومی" },
+    { icon: <LocationAdd active={value === 1} />, name: "اطلاعات مطب" },
+    { icon: <CalendarTick active={value === 2} />, name: "روزهای کاری" },
+  ];
+
+  return (
+    <ul className="flex items-center justify-center">
+      {list.map((item, idx) => (
+        <li className="" key={idx}>
+          <div className="flex flex-col items-center justify-center gap-2">
+            <div
+              className={`flex items-center w-fit justify-center p-[18px] rounded-full
+          ${value === idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
+            >
+              {item.icon}
+            </div>
+            <p
+              className={`text-[16px]
+           ${
+             value === idx
+               ? "font-bold text-[#5559CE]"
+               : "font-normal text-[#616161]"
+           }`}
+            >
+              {item.name}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default Step;

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>
   );