fix pagination ui | 24

src/views/Products/layouts/Desktop/Main.js

@@ -15,6 +15,7 @@ import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
 import Posts from "./Posts";
 import Pagination from "./Pagination";
 const num = 6;
+
 export const Main = ({
   books,
   grades,
@@ -38,6 +39,7 @@ export const Main = ({
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
+
   useEffect(() => {
     setTotal(books.length);
   }, [books]);
@@ -95,23 +97,17 @@ export const Main = ({
 
   const elements = Items(1);
   const vods = Items(2);
+
   console.log(elements.length);
+
   const lastPage = Math.floor((elements.length - 1) / num) + 1;
   const pages = lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : [];
+
   return (
     <div
       className="flex flex-col w-3/4 pb-20 min-h-screen"
       style={{ minWidth: "calc(100% * 3 / 4)" }}
     >
-      {/* <div className="bg-red-400 ">
-        <h1 className="mb-5">My Blog</h1>
-        <Posts posts={currentPosts} loading={loading} />
-        <Pagination
-          postsPerPage={postsPerPage}
-          totalPosts={posts.length}
-          paginate={paginate}
-        />
-      </div> */}
       <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
         <div className="flex text-sm items-center mr-2 ml-4">
           <svg
@@ -203,6 +199,7 @@ export const Main = ({
             <Loading size={4} color="bg-green-400" />
           </div>
         )}
+
         {books.length > 0 && (
           <div className="relative w-full mt-7 " style={{ direction: "ltr" }}>
             <Carousel
@@ -250,6 +247,7 @@ export const Main = ({
             </Carousel>
           </div>
         )}
+
         <div className="w-full flex flex-row flex-wrap  mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
           {elements
             ?.slice((page - 1) * num, page * num)
@@ -263,10 +261,12 @@ export const Main = ({
                 type={0}
               />
             ))}
-          <div className="flex w-full justify-center">
+
+          <div className="w-full flex justify-center gap-x-2">
             {pages.map((e) => (
               <div
-                className="m-1 p-1 rounded  bg-gray-200 "
+                style={{ backgroundColor: "#DEFFF188" }}
+                className="w-8 p-2 text-sm text-center rounded-md text-green7B cursor-pointer transform translate"
                 onClick={() => setPage(e)}
               >
                 {e}