add empty state bookmark

HimanshuNarware · May 30, 2024 · 1775033 · 1775033
1 parent 9684367
commit 1775033
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 48 deletions.
diff --git a/frontend/src/Component/BookMark.js b/frontend/src/Component/BookMark.js
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { deleteSource } from "../Slice/DataSlice";
+import bookmarkAnimation from "../lottie/bookmark.json";
 import "../style/BookMark.css";
+import Lottie from "lottie-react";
 
 function BookMark() {
   const sourceData = useSelector((state) => state.SourceReducer.sourceData);
@@ -33,63 +35,79 @@ function BookMark() {
 
   return (
     <div className="containerBK">
-    <div className="container-bk">
-      {currentBookmarks.length > 0 ? (
-        currentBookmarks.map((data, index) => (
-          <div className="box-bk" key={index}>
-            <img className="logo" src={data.image} alt={data.name} />
-            <h2>{data.name}</h2>
-            <p>{data.desc}</p>
-            <button className="btn-b" onClick={() => window.open(data.link)}>
-              Link
-            </button>
-            <button
-              className="btn-b"
-              onClick={() => handleDeleteBookmark(data.name)}
-            >
-              Remove
-            </button>
-          </div>
-        ))
-      ) : (
-        <div className="bk-empty">
-          <p>No bookmarks found</p>
-        </div>
-      )}
+      <div className="container-bk">
+        {currentBookmarks.length > 0 ? (
+          currentBookmarks.map((data, index) => (
+            <div className="box-bk" key={index}>
+              <img className="logo" src={data.image} alt={data.name} />
+              <h2>{data.name}</h2>
+              <p>{data.desc}</p>
+              <button className="btn-b" onClick={() => window.open(data.link)}>
+                Link
+              </button>
+              <button
+                className="btn-b"
+                onClick={() => handleDeleteBookmark(data.name)}
+              >
+                Remove
+              </button>
+            </div>
+          ))
+        ) : (
+          <div></div>
+        )}
       </div>
       <div>
         {/* Pagination */}
-      {sourceData.length > postPerPage && currentBookmarks.length > 0 && (
-        <ul className="pagination">
-          {currentPage !== 1 && (
-            <li className="page-item">
-              <button onClick={prevPage} className="page-link">
-                Prev
-              </button>
-            </li>
-          )}
-          {Array.from({ length: Math.ceil(sourceData.length / postPerPage) }).map(
-            (_, index) => (
-              <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
-                <button onClick={() => paginate(index + 1)} className="page-link">
+        {sourceData.length > postPerPage && currentBookmarks.length > 0 && (
+          <ul className="pagination">
+            {currentPage !== 1 && (
+              <li className="page-item">
+                <button onClick={prevPage} className="page-link">
+                  Prev
+                </button>
+              </li>
+            )}
+            {Array.from({
+              length: Math.ceil(sourceData.length / postPerPage),
+            }).map((_, index) => (
+              <li
+                key={index}
+                className={`page-item ${
+                  currentPage === index + 1 ? "active" : ""
+                }`}
+              >
+                <button
+                  onClick={() => paginate(index + 1)}
+                  className="page-link"
+                >
                   {index + 1}
                 </button>
               </li>
-            )
-          )}
-          {currentPage !== Math.ceil(sourceData.length / postPerPage) && (
-            <li className="page-item">
-              <button onClick={nextPage} className="page-link">
-                Next
-              </button>
-            </li>
-          )}
-        </ul>
-      )}
+            ))}
+            {currentPage !== Math.ceil(sourceData.length / postPerPage) && (
+              <li className="page-item">
+                <button onClick={nextPage} className="page-link">
+                  Next
+                </button>
+              </li>
+            )}
+          </ul>
+        )}
       </div>
+
+      {sourceData.length === 0 && (
+        <div>
+          <Lottie
+            animationData={bookmarkAnimation}
+            style={{ height: "200px" }}
+          />
+          <h1 className="text-2xl font-semibold">No bookmark Found</h1>
+          <h3 className="mb-4">Explore Devlabs and add them to your bookmark</h3>
+        </div>
+      )}
     </div>
   );
 }
 
 export default BookMark;
-