build(deps): update package.json, src/components/AddToCart/index.js, src/components/Banners/index.js and yarn.lock

package.json

@@ -19,7 +19,7 @@
     "react-dom": "^17.0.2",
     "react-modern-calendar-datepicker": "^3.1.6",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "6",
     "react-scripts": "4.0.3",
     "react-star-rating-component": "^1.4.1",
     "react-tooltip": "^4.2.21",

src/components/AddToCart/index.js

@@ -26,7 +26,7 @@ const AddToCartCard = ({
     },
   ];
   return (
-    <div className="w-full felx flex-col items-center justify-center p-4 pt-0 mx-4 bg-gray-100 ">
+    <div className="w-full felx flex-col items-center justify-center p-4 pt-0 mx-4 bg-gray-100">
       {showProduct && (
         <div className="w-full max-w-8 flex justify-center items-center py-4 m-0 overflow-hidden">
           <img
@@ -37,7 +37,7 @@ const AddToCartCard = ({
           />
           <div className="text-sm">
             <h1 className="text-sm">{productName}</h1>
-            <p className=" text-xs pt-2 text-blue-400">{productCat}</p>
+            <p className="pt-2 text-xs text-blue-400">{productCat}</p>
           </div>
         </div>
       )}
@@ -52,11 +52,11 @@ const AddToCartCard = ({
       ))}
       <div className="w-full flex flex-col items-center justify-center p-4">
         <h1 className="text-xl text-gray-500">
-          <span className=" text-blue-400"> {price} </span>
+          <span className="text-blue-400"> {price} </span>
           تومان
         </h1>
         {profit && (
-          <h5 className="text-xs p-2 pb-0 text-blue-400">
+          <h5 className="p-2 pb-0 text-xs text-blue-400">
             با خرید این کالا {profit} تومان سود کنید
           </h5>
         )}

src/components/Banners/index.js

@@ -1,60 +1,61 @@
 import React from "react";
 
-const Banners = ({
-    mainBanner,
-    leftBanner,
-    midTopBanner,
-    midBottomBanner,
-}) => {
-    return (
-        <div className="flex w-full justify-between" style={{
-            height: '400px'
-        }}>
-            <div className={`h-full w-1/2 rounded-xl flex items-center`} style={{
-                background: mainBanner ? '' : 'rgba(134,160,185,0.16)',
-
-            }}>
-
-                <img src={mainBanner} className="rounded-xl h-full" />
-
-            </div>
-            <div className="flex h-full w-1/2 ">
-                <div className="flex flex-col w-1/2 h-full px-6 justify-center items-between">
-
-                    <div className={`${midTopBanner ? '' : 'h-1/2 '} w-full rounded-xl mb-2`}
-                        style={{
-                            background: midTopBanner ? '' : 'rgba(134,160,185,0.16)',
-
-                        }}
-                    >
-
-                        <img src={midTopBanner} className="rounded-xl" />
-                    </div>
-                    <div className={`${midBottomBanner ? '' : 'h-1/2 '} w-full rounded-xl mt-2`}
-                        style={{
-                            background: midBottomBanner ? '' : 'rgba(134,160,185,0.16)',
-
-                        }}
-                    >
-
-                        <img src={midBottomBanner} className="rounded-xl" />
-
-                    </div>
-
-                </div>
-                <div className=" h-full w-1/2 rounded-xl"
-                    style={{
-                        background: leftBanner ? '' : 'rgba(134,160,185,0.16)',
-
-                    }}
-                >
-                    <img src={leftBanner} className="rounded-xl" />
-
-                </div>
-            </div>
+const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => {
+  return (
+    <div
+      className="w-full flex justify-between"
+      style={{
+        height: "400px",
+      }}
+    >
+      <div
+        className={`w-1/2 h-full flex items-center rounded-xl`}
+        style={{
+          background: mainBanner ? "" : "rgba(134,160,185,0.16)",
+        }}
+      >
+        <img src={mainBanner} className="h-full rounded-xl" alt="banner" />
+      </div>
+      <div className="w-1/2 h-full flex">
+        <div className="w-1/2 h-full flex flex-col justify-center items-between px-6">
+          <div
+            className={`${midTopBanner ? "" : "h-1/2 "} w-full rounded-xl mb-2`}
+            style={{
+              background: midTopBanner ? "" : "rgba(134,160,185,0.16)",
+            }}
+          >
+            <img
+              src={midTopBanner}
+              className="rounded-xl"
+              alt="mid-top-banner"
+            />
+          </div>
+          <div
+            className={`${
+              midBottomBanner ? "" : "h-1/2 "
+            } w-full rounded-xl mt-2`}
+            style={{
+              background: midBottomBanner ? "" : "rgba(134,160,185,0.16)",
+            }}
+          >
+            <img
+              src={midBottomBanner}
+              className="rounded-xl"
+              alt="mid-bottom-banner"
+            />
+          </div>
         </div>
-    )
-}
-
+        <div
+          className="w-1/2 h-full rounded-xl"
+          style={{
+            background: leftBanner ? "" : "rgba(134,160,185,0.16)",
+          }}
+        >
+          <img src={leftBanner} className="rounded-xl" alt="left-banner" />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default Banners;