63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import CalendarTickGreenP from "../../icons/CalendarTickGreenP";
|
|
import TextLoading from "@/app/component/loading/Text";
|
|
import CardOrangeP from "../../icons/CardOrangeP";
|
|
import PeopleBlueP from "../../icons/PeopleBlueP";
|
|
|
|
function Cards({ data, loading }) {
|
|
const list = [
|
|
{
|
|
text: "تعداد کل بیماران",
|
|
bg_color: "bg-[#E5E9FF]",
|
|
value: data.number_of_patients,
|
|
label: "نفر",
|
|
icon: <PeopleBlueP />,
|
|
},
|
|
{
|
|
text: "نوبت های امروز",
|
|
bg_color: "bg-[rgba(20,204,38,0.14)]",
|
|
value: data.today_turns,
|
|
label: "نوبت",
|
|
icon: <CalendarTickGreenP />,
|
|
},
|
|
{
|
|
text: "پرداختی ها",
|
|
bg_color: "bg-[#FFD8C5]",
|
|
value: data.payments,
|
|
label: "تومان",
|
|
icon: <CardOrangeP />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-[16px]">
|
|
{list.map((item, idx) => (
|
|
<li
|
|
className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[4px] border border-solid border-[#EFEFEF] bg-[#FFF]"
|
|
key={idx}
|
|
>
|
|
<div
|
|
className={`p-[12px] w-fit h-fit rounded-[2px] ${item.bg_color}`}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[#525252] text-[14px] font-normal">
|
|
{item.text}
|
|
</p>
|
|
<TextLoading width={70} height={20} loading={loading}>
|
|
<p className="text-[#3B3B3B] text-[24px] font-medium">
|
|
{item.value}
|
|
<span className="text-[#616161] mr-[6px] text-[12px] font-normal">
|
|
{item.label}
|
|
</span>
|
|
</p>
|
|
</TextLoading>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default Cards;
|