reza added empty to cart

src/components/Empty/index.js

@@ -5,9 +5,12 @@ export const Empty = ({ text, buttonText, buttonAction }) => {
   return (
     <div
       className="flex-1 flex flex-col justify-center items-center"
-      style={{ minHeight: 'calc(100vh - 120px)' }}
+      style={{ minHeight: "calc(100vh - 120px)" }}
     >
       <strong className="text-lg font-bold text-gray1">{text}</strong>
+      {buttonText && (
+        <button className="transform translate-y-20 py-2 px-6 text-base rounded-md bg-blueC0 text-white" onClick={() => buttonAction()}>{buttonText}</button>
+      )}
     </div>
   );
 };

src/views/ShoppingCart/index.js

@@ -5,6 +5,7 @@ import {
   publicApi,
   dialog,
 } from "../../redux/actions";
+import { useNavigate } from "react-router-dom";
 import separate from "../../utils/separate";
 import { toast } from "react-toastify";
 import DeliveryForm from "../DeliveryForm";
@@ -12,6 +13,7 @@ import Product from "./Product";
 import Address from "../Address";
 import Code from "./Code";
 import Button from "../../components/Button";
+import Empty from "../../components/Empty";
 
 //assets
 import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
@@ -36,7 +38,7 @@ function ShoppingCart({
   setDialog,
 }) {
   const [phase, setPhase] = useState("products");
-
+  const navigation = useNavigate();
   useEffect(() => {
     getList();
     getFactorInfo({ userId: user?.id });
@@ -165,17 +167,13 @@ function ShoppingCart({
   const layouts = {
     products: isMobile ? (
       <>
-        {productsLength ? (
-          list
+        {list
           .sort((a, b) => a?.id - b?.id)
           .map(
             (product, index) =>
               product.condition < 2 && (
                 <Product loading={loading} key={index} product={product} />
               )
-            )
-        ) : (
-          <strong className="text-blueC0">سبد خرید شما خالی است.</strong>
           )}
         <Code />
       </>
@@ -190,6 +188,9 @@ function ShoppingCart({
 
   return isMobile ? (
     <div className="w-full flex flex-col px-4 pb-24">
+      {productsLength ? (
+        <>
+          {" "}
           <div className="flex flex-col flex-1">{layouts[phase]}</div>
           {phase !== "address" && (
             <>
@@ -250,6 +251,14 @@ function ShoppingCart({
               )}
             </>
           )}
+        </>
+      ) : (
+        <Empty
+          text="سبد خرید شما خالی است."
+          buttonText="فروشگاه"
+          buttonAction={() => navigation('/products')}
+        />
+      )}
     </div>
   ) : (
     <div