made improvements in pagination

Author: druvkotwani

client/src/components/Pagination/Pagination.jsx

@@ -15,13 +15,13 @@ export default function Pagination({ pageNo, setPageNo, totalPages }) {
             <div className="flex flex-1 items-center justify-center">
                 <div>
                     <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
-                        <button onClick={() => {
-                            if (pageNo < 2) return;
-                            setPageNo((no) => no - 1)
-                        }} className="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-800 focus:z-20 focus:outline-offset-0">
-                            <span className="sr-only">Previous</span>
-                            ◀️
-                        </button>
+                        {
+                            pageNo > 1 && <button onClick={() => setPageNo((no) => no - 1)} className="ring-1 ring-inset ring-gray-300 relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 bg-[#0e0e0e]  hover:bg-[#292829]  focus:z-20 focus:outline-offset-0">
+                                <span className="sr-only">Previous</span>
+                                {/* <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" /> */}
+                                ◀️
+                            </button>
+                        }
 
                         {
                             Array.from({ length: totalPages }, (_, index) => index + 1).map((item) => {
@@ -30,22 +30,21 @@ export default function Pagination({ pageNo, setPageNo, totalPages }) {
                                         key={item}
                                         onClick={() => setPageNo(item)}
                                         aria-current={pageNo === item ? 'page' : undefined}
-                                        className={`ring-1 ring-inset ring-gray-300 relative z-10 inline-flex items-center  px-4 py-2 text-sm font-semibold hover:bg-gray-800 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${pageNo === item ? 'bg-gray-500 hover:bg-gray-500 ' : 'bg-transparent'}`}
+                                        className={`ring-1 ring-inset ring-gray-300 relative z-10 inline-flex items-center  px-4 py-2 text-sm font-semibold hover:bg-[#292829]  text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${pageNo === item ? 'bg-[#292829] hover:bg-[#292829] ' : 'bg-[#0e0e0e]'}`}
                                     >
                                         {item}
                                     </button>
                                 )
                             })
                         }
 
-                        <button onClick={() => {
-                            if (pageNo > totalPages - 1) return;
-                            setPageNo((no) => no + 1)
-                        }} className="ring-1 ring-inset ring-gray-300 relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400  hover:bg-gray-800 focus:z-20 focus:outline-offset-0">
-                            <span className="sr-only">Next</span>
-                            {/* <ChevronRightIcon className="h-5 w-5" aria-hidden="true" /> */}
-                            ▶️
-                        </button>
+                        {
+                            pageNo < totalPages && <button onClick={() => setPageNo((no) => no + 1)} className="ring-1 ring-inset ring-gray-300 relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 bg-[#0e0e0e]  hover:bg-[#292829]  focus:z-20 focus:outline-offset-0">
+                                <span className="sr-only">Next</span>
+                                {/* <ChevronRightIcon className="h-5 w-5" aria-hidden="true" /> */}
+                                ▶️
+                            </button>
+                        }
                     </nav>
                 </div>
             </div>