design style step head

components/panel/addDoctor/Step.js

@@ -4,26 +4,26 @@ 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: "روزهای کاری" },
+    { 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}>
+        <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 w-fit justify-center p-[18px] rounded-full
-          ${value === idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
+              className={`flex items-center justify-center p-[18px] w-[75px] h-[75px] rounded-full
+          ${value >= idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
             >
               {item.icon}
             </div>
             <p
               className={`text-[16px]
            ${
-             value === idx
+             value >= idx
                ? "font-bold text-[#5559CE]"
                : "font-normal text-[#616161]"
            }`}
@@ -31,6 +31,13 @@ function Step({ value }) {
               {item.name}
             </p>
           </div>
+          {list.length > idx + 1 && (
+            <span
+              className={`block rounded-[16px] h-[2px] w-[100px] ${
+                value >= idx ? "bg-[#5559CE]" : "bg-[#EFEFEF]"
+              }`}
+            ></span>
+          )}
         </li>
       ))}
     </ul>