From 26f3ab3a095d25f712e023b668b2befcebe9168d Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Thu, 10 Oct 2024 22:09:01 +0330
Subject: [PATCH] design style step head

---
 components/panel/addDoctor/Step.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/panel/addDoctor/Step.js b/components/panel/addDoctor/Step.js
index ec7a92f..65512c1 100644
--- a/components/panel/addDoctor/Step.js
+++ b/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>