53 lines
2.1 KiB
JavaScript
53 lines
2.1 KiB
JavaScript
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="flex items-center justify-center" key={idx}>
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<div
|
|
className={`flex items-center bg-[#F6F6F6] justify-center p-[18px]
|
|
w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg: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"}`}
|
|
>
|
|
<div className="z-10 delay-500">{item.icon}</div>
|
|
</div>
|
|
<p
|
|
className={`text-[10px] sm:text-[12px] md:text-[14px] lg:text-[16px] text-nowrap
|
|
${
|
|
value >= idx
|
|
? "font-bold text-[#5559CE]"
|
|
: "font-normal text-[#616161]"
|
|
}`}
|
|
>
|
|
{item.name}
|
|
</p>
|
|
</div>
|
|
{list.length > idx + 1 && (
|
|
<span
|
|
className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg: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>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default Step;
|