update

src/components/ProductStatusCard/index.js

@@ -15,8 +15,9 @@ 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"
+              className="flex flex-row items-center justify-between mt-3 mb-3"
               key={index}
             >
               <div className="flex flex-row items-center">
@@ -36,11 +37,15 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
                   )}
                 </div>
               </div>
-            {item.alertIcon && <img src={circle} alt="" className="w-8 h-8" />}
+              {item.alertIcon && (
+                <img src={circle} alt="" className="w-8 h-8" />
+              )}
+            </div>
+            <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>