basic style step page add-doctor

2024-10-10 21:59:31 +03:30
parent fb0c02abd4
commit 07dd617803
5 changed files with 216 additions and 23 deletions
@@ -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;