update src/components/CardDesgin/ProcessCard/index.js

src/components/CardDesgin/ProcessCard/index.js

@@ -26,24 +26,33 @@ const ProcessCard = ({ processes, title, hint, items }) => {
           ))}
         </div>
         {/* middle */}
-        <div className="flex flex-col p-4">
+        <div className="flex flex-col p-4 my-5">
           <h2 className="text-lg text-blue-800 font-sansbold">{title}</h2>
           <p className="text-sm text-justify leading-6 mt-3">{hint}</p>
         </div>
         {/* bottom */}
-        <div className="flex flex-row item-center justify-around p-4 bg-gray-200 rounded">
+        <div className="flex flex-row item-center justify-around p-3 bg-gray-200 rounded ">
           {/* right */}
           <Button
             text={"ویرایش"}
             icon={"images/white-cart-icon.svg"}
             iconHolderClassName={""}
-            iconClassName={"mr-2 w-6"}
+            iconClassName={"mr-2 w-5"}
             className="p-2 bg-blue-500 text-white text-sm rounded-md"
           />
           {/* left */}
-          {items.map((item, i) => (
-            <img src={item.icon} alt="" />
-          ))}
+          <div className="flex-1 flex flex-row items-center justify-around  divide-x-2 divide-gray-300 divide-x-reverse">
+            {items.map((item, i) => (
+              <div
+                key={i}
+                className="flex flex-row flex-1 items-center justify-center flex-grow"
+              >
+                <img src={item.icon} alt="" className="w-4 h-4 ml-1" />
+                <p className="text-xs">{item.name}</p>
+                <p className="text-xs mr-1">{item.ans}</p>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
       {/* left */}
@@ -82,9 +91,19 @@ ProcessCard.defaultProps = {
 
   items: [
     {
-      icon: "images/user-edit.svg",
-      name: "سوالات",
-      ans: "5",
+      icon: "images/notification.svg",
+      name: "سوالات:",
+      ans: 5,
+    },
+    {
+      icon: "images/notification.svg",
+      name: "چک لیست:",
+      ans: "تابع دارد",
+    },
+    {
+      icon: "images/notification.svg",
+      name: "مکاتبات:",
+      ans: "دارد",
     },
   ],
 };