empty data component

components/productsPage/products.tsx

@@ -1,16 +1,24 @@
+"use client";
 import { allProduct } from "@/lib/allProducts";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import EmptyState from "./emptyData";
 
 export default function Products() {
   const [allProducts, setAllProducts] = useState<any>(null);
   useEffect(() => {
     const all = allProduct();
-    all && Array.isArray(all) ? setAllProducts(all) : setAllProducts([]);
+    all && Array.isArray(all) && all.length > 0
+      ? setAllProducts(all)
+      : setAllProducts([]);
     setAllProducts;
-  }, [allProducts]);
+  }, []);
   return (
-    <div>
-      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"></div>
+    <div className="">
+      {allProducts && allProducts.length > 0 ? (
+        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"></div>
+      ) : (
+        <EmptyState />
+      )}
     </div>
   );
 }