add animation to step

components/panel/addDoctor/Step.js

@@ -4,7 +4,7 @@ import UserEdit from "@/components/icons/UserEdit";
 
 function Step({ value }) {
   const list = [
-    { icon: <UserEdit active={value > 0} />, name: "اطلاعات عمومی" },
+    { icon: <UserEdit active={value >= 0} />, name: "اطلاعات عمومی" },
     { icon: <LocationAdd active={value >= 1} />, name: "اطلاعات مطب" },
     { icon: <CalendarTick active={value >= 2} />, name: "روزهای کاری" },
   ];
@@ -15,15 +15,17 @@ function Step({ value }) {
         <li className="flex items-center justify-center" key={idx}>
           <div className="flex flex-col items-center justify-center gap-2">
             <div
-              className={`flex items-center justify-center p-[18px] w-[75px] h-[75px] rounded-full
-          ${value > idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
+              className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] w-[75px] h-[75px] rounded-full
+                relative overflow-hidden before:delay-500 before:transition-all before:duration-500 
+                before:absolute before:w-full before:h-full before:bg-[#5559CE]
+          ${value >= idx ? "before:right-0" : "before:-right-full"}`}
             >
-              {item.icon}
+              <div className="z-10 delay-500">{item.icon}</div>
             </div>
             <p
               className={`text-[16px]
            ${
-             value > idx
+             value >= idx
                ? "font-bold text-[#5559CE]"
                : "font-normal text-[#616161]"
            }`}
@@ -33,9 +35,11 @@ function Step({ value }) {
           </div>
           {list.length > idx + 1 && (
             <span
-              className={`block rounded-[16px] h-[2px] w-[100px] ${
-                value > idx ? "bg-[#5559CE]" : "bg-[#EFEFEF]"
-              }`}
+              className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[100px]
+                relative overflow-hidden before:transition-all before:duration-500 
+                before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
+
+                 ${value > idx ? "before:right-0" : "before:-right-full"}`}
             ></span>
           )}
         </li>

components/panel/addDoctor/index.js

@@ -13,14 +13,6 @@ import ArrowRightPH from "@/components/icons/ArrowRightPH";
 import { Button } from "@mui/material";
 import Step from "./Step";
 
-const listTab = [
-  "اطلاعات عمومی",
-  "اطلاعات مطب",
-  "نوبت ها",
-  "روزهای کاری",
-  "روزهای خاص",
-];
-
 function AddDoctorPage() {
   const [value, setValue] = useState(0);
   const [open, setOpen] = useState(false);
@@ -28,11 +20,10 @@ function AddDoctorPage() {
   const handleChange = (event, newValue) => setValue(newValue);
 
   const components = [
-    <GeneralInformation />,
-    <OfficeInformation />,
-    <Turns />,
-    <WorkingDays />,
-    <SpecialDays />,
+    <GeneralInformation setValue={setValue} />,
+    <OfficeInformation setValue={setValue} />,
+    <WorkingDays setValue={setValue} />,
+    <SpecialDays setValue={setValue} />,
   ];
 
   return (

components/panel/addDoctor/listMenu/generalInformation/form/index.js

@@ -8,7 +8,7 @@ import { Button } from "@mui/material";
 import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import FieldDate from "./FieldDate";
 
-function Form() {
+function Form({ setValue }) {
   const [data, setData] = useState({
     name: { value: "احسان احمدی", isEdit: false },
     medical_system_number: { value: 1741025645, isEdit: false },
@@ -100,6 +100,7 @@ function Form() {
       <div className="mt-[40px] w-full flex justify-end">
         <Button
           className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
+          onClick={() => setValue((prev) => prev + 1)}
           variant="contained"
         >
           ثبت اطلاعات

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

@@ -1,11 +1,11 @@
-import Form from "./form/Form";
+import Form from "./form";
 import Head from "./Head";
 
-function GeneralInformation() {
+function GeneralInformation({ setValue }) {
   return (
     <div className="opacity-page pb-[24px]">
       <Head />
-      <Form />
+      <Form setValue={setValue} />
     </div>
   );
 }

components/panel/addDoctor/listMenu/officeInformation/index.js

@@ -2,13 +2,14 @@ import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import { Button } from "@mui/material";
 import Form from "./Form";
 
-function OfficeInformation() {
+function OfficeInformation({ setValue }) {
   return (
     <div className="opacity-page pb-[24px]">
       <Form />
       <div className="mt-[40px] w-full flex justify-end">
         <Button
           className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
+          onClick={() => setValue((prev) => prev + 1)}
           variant="contained"
         >
           ثبت اطلاعات