design sidebar & head layout & page dashboard

2024-09-10 02:00:41 +03:30
parent 60749d3b8c
commit dffdab7139
41 changed files with 1350 additions and 170 deletions
@@ -0,0 +1,36 @@
+import CalendarTickGreenP from "../icons/CalendarTickGreenP"
+import CardOrangeP from "../icons/CardOrangeP"
+import PeopleBlueP from "../icons/PeopleBlueP"
+
+function Cards({ data }) {
+
+  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 items-center justify-center gap-[32px] mx-[16px]">
+      {list.map((item, idx) => (
+        <li
+          className="flex min-w-[226px] flex-col 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>
+            <p className="text-[#3B3B3B] text-[24px] font-medium">
+              {item.value}
+              <span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
+            </p>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Cards