update

src/components/ProductStatusCard/index.js

@@ -15,32 +15,37 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
     <section className="bg-white m-10 w-full sm:w-8/12 md:w-5/12	lg:w-3/12	p-5">
       <div className="bg-gray-200 rounded px-4 py-2">
         {items.map((item, index) => (
-          <div
+          <div>
-            className="flex flex-row items-center justify-between mb-4"
+            <div
-            key={index}
+              className="flex flex-row items-center justify-between mt-3 mb-3"
-          >
+              key={index}
-            <div className="flex flex-row items-center">
+            >
-              <img src={item.icon} alt="" className="w-10 h-10" />
+              <div className="flex flex-row items-center">
-              <div className="flex flex-col mr-3">
+                <img src={item.icon} alt="" className="w-10 h-10" />
-                <p className="text-sm">
+                <div className="flex flex-col mr-3">
-                  <span className="font-bold">{item.subtitle}</span>
+                  <p className="text-sm">
-                  {item.title}
+                    <span className="font-bold">{item.subtitle}</span>
-                </p>
+                    {item.title}
-                {item.customerSatisfaction && (
-                  <p className="text-xs mt-1">
-                    رضایت خریداران:
-                    <span className="font-bold text-green-500 mr-2">
-                      {item.customerSatisfactionPercent}
-                    </span>
                   </p>
-                )}
+                  {item.customerSatisfaction && (
+                    <p className="text-xs mt-1">
+                      رضایت خریداران:
+                      <span className="font-bold text-green-500 mr-2">
+                        {item.customerSatisfactionPercent}
+                      </span>
+                    </p>
+                  )}
+                </div>
               </div>
+              {item.alertIcon && (
+                <img src={circle} alt="" className="w-8 h-8" />
+              )}
             </div>
-            {item.alertIcon && <img src={circle} alt="" className="w-8 h-8" />}
+            <div className="border-b border-gray-300"></div>
           </div>
         ))}
         <div className="flex flex-col items-center">
-          <p className="text-2xl text-blue-600 my-3">
+          <p className="text-2xl text-blue-600 mt-5 mb-2">
             {productPrice}
             <span className="text-lg text-gray-700 font-light">تومان</span>
           </p>
@@ -51,7 +56,7 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
           </p>
         </div>
         <div className="w-full flex flex-col items-center">
-          <button className="w-11/12 mt-7 mb-4 rounded bg-blue-400 text-white px-5 py-4 text-lg hover:bg-blue-600 transtition ease-linear duration-300">
+          <button className="w-11/12 mt-5 mb-2 rounded bg-blue-400 text-white px-5 py-4 text-lg hover:bg-blue-600 transtition ease-linear duration-300">
             افزودن به سبد خرید
           </button>
         </div>