Stepper Fixed

src/components/Stepper/index.js

@@ -6,21 +6,10 @@ function Stepper({
   deactiveColor,
   count,
   currentStep,
+  steps
 }) {
-  const steps = [
-    {
-      title: 'اطلاعات هویتی'
-    },
-    {
-      title: 'مشخصات والدین'
-    },
-    {
-      title: 'قوانین و مقررات'
-    },
-    {
-      title: 'تایید اطلاعات'
-    },
-  ]
+  
+ 
   return (
     <div
       className={`flex items-center ${
@@ -38,12 +27,12 @@ function Stepper({
            className="w-8 h-8 text-white text-sm rounded-full flex justify-center items-center"
            style={{
              backgroundColor:
-               currentStep === Number(index) ? activeColor : deactiveColor,
+               item.active ? activeColor : deactiveColor,
            }}
          >
            
          </div>
-        <p className={`mr-4 font-bold ${currentStep === Number(index) ? 'text-red26' : 'text-gray-400'}`}>{item.title}</p>
+        <p className={`mr-4 font-bold ${item.active ? 'text-red26' : 'text-gray-400'}`}>{item.title}</p>
          </div>
          {count !== (Number(index) + 1) && (
            <span
@@ -54,7 +43,7 @@ function Stepper({
              }`}
              style={{
                opacity: '0.5',
-               background: currentStep === Number(index) ? activeColor : deactiveColor,
+               background: item.active ? activeColor : deactiveColor,
               //  borderTop: direction === "horizontal" ? `3px solid ${
               //    currentStep === Number(index) ? activeColor : deactiveColor
               //  }` : '',
@@ -64,8 +53,11 @@ function Stepper({
                transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(64px)'}`
              }}
            ></span>
+           
          )}
+
        </div>
+       
       ))}
     </div>
   );

src/view/register/index.js

@@ -18,6 +18,7 @@ const Register = ({ activeLogin }) => {
     const [index, setIndex] = useState(1);
     const [register, setRegister] = useState(false);
     const timeoutRef = useRef(null);
+    const [activeStep, setActiveStep] = useState([true, false, false, false]);
 
     const focusHandler = (id) => {
         let inputs = document.querySelectorAll(".Login-box-form-item");
@@ -46,19 +47,19 @@ const Register = ({ activeLogin }) => {
     const stepCont = [
         {
             title: 'اطلاعات هویتی',
-            step: 0
+            active: activeStep[0]
         },
         {
             title: 'مشخصات والدین',
-            step: 1
+            active: activeStep[1]
         },
         {
             title: 'قوانین و مقررات',
-            step: 2
+            active: activeStep[2]
         },
         {
             title: 'تایید اطلاعات',
-            step: 3
+            active: activeStep[3]
         },
     ]
     const grades = [
@@ -122,7 +123,6 @@ const Register = ({ activeLogin }) => {
         <div className="w-full flex justify-center" style={{ direction: 'rtl', marginTop: '8.5%' }}>
             <div className="w-11/12 flex ">
                 {/* form */}
-
                 <div className="flex w-1/5 border-0 border-l border-solid border flex-col items-center p-6">
 
                     <img src={logo} className="w-1/2 m-4 mt-0" />
@@ -155,7 +155,7 @@ const Register = ({ activeLogin }) => {
                                 )
 
                             } */}
-                            <Stepper count={4} currentStep={steps}/>
+                            <Stepper count={4} currentStep={steps} steps={stepCont} />
                         </div>
 
 
@@ -227,9 +227,10 @@ const Register = ({ activeLogin }) => {
                                 </div>
                                 <div className="flex pt-10 justify-end">
                                     <div className="w-40">
-                                        <Button borderType='rounded' title='مرحله بعد' onClick={() =>
+                                        <Button borderType='rounded' title='مرحله بعد' onClick={() => {
                                             setSteps(1)
-                                        } />
+                                            setActiveStep([true, true, false, false])
+                                        }} />
                                     </div>
                                 </div>
 
@@ -341,15 +342,17 @@ const Register = ({ activeLogin }) => {
                                 </div>
                                 <div className="flex pt-10 justify-end">
                                     <div className="w-40 mx-4">
-                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() =>
-                                            setSteps(0)
-                                        } />
+                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
+                                            setSteps(0);
+                                            setActiveStep([true, false, false, false])
+                                        }} />
                                     </div>
 
                                     <div className="w-40">
-                                        <Button borderType='rounded' title='مرحله بعد' onClick={() =>
-                                            setSteps(2)
-                                        } />
+                                        <Button borderType='rounded' title='مرحله بعد' onClick={() => {
+                                            setSteps(2);
+                                            setActiveStep([true, true, true, false])
+                                        }} />
                                     </div>
                                 </div>
 
@@ -397,15 +400,17 @@ const Register = ({ activeLogin }) => {
                             </div>
                             <div className="w-full flex pt-10 justify-end">
                                 <div className="w-40 mx-4">
-                                    <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() =>
-                                        setSteps(1)
-                                    } />
+                                    <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
+                                        setSteps(1);
+                                        setActiveStep([true, true, false, false])
+                                    }} />
                                 </div>
 
                                 <div className="w-40">
-                                    <Button borderType='rounded' title='مرحله بعد' onClick={() =>
-                                        setSteps(3)
-                                    } />
+                                    <Button borderType='rounded' title='مرحله بعد' onClick={() => {
+                                        setSteps(3);
+                                        setActiveStep([true, true, true, true])
+                                    }} />
                                 </div>
                             </div>
 
@@ -425,9 +430,10 @@ const Register = ({ activeLogin }) => {
 
                                 <div className="w-full flex pt-10 justify-end">
                                     <div className="w-40 mx-4">
-                                    <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() =>
-                                        setSteps(1)
-                                    } />
+                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined' onClick={() => {
+                                            setSteps(2)
+                                            setActiveStep([true, true, true, false])
+                                        }} />
                                     </div>
 
                                     <div className="w-40">