src/pages/blogs/index.tsx

@@ -8,6 +8,8 @@ import '../../styles/filters.css'
 import '../../styles/pagination.css'
 import '../../styles/search.css'
 import '../../styles/styles.css'
+import { PaginationWithPageNumbers } from 'components/Pagination'
+import { scrollIntoView } from 'utils'
 
 export const BlogsPage = () => {
   const blogs = useLoaderData() as Partial<BlogCardDetails>[] | undefined
@@ -80,10 +82,31 @@ export const BlogsPage = () => {
     return filtered
   }, [blogs, searchTerm, filterOptions.sort, filterOptions.nsfw])
 
+  // Pagination logic
+  const [currentPage, setCurrentPage] = useState(1)
+  const scrollTargetRef = useRef<HTMLDivElement>(null)
+
+  const MAX_BLOGS_PER_PAGE = 16
+  const totalBlogs = filteredBlogs.length
+  const totalPages = Math.ceil(totalBlogs / MAX_BLOGS_PER_PAGE)
+  const startIndex = (currentPage - 1) * MAX_BLOGS_PER_PAGE
+  const endIndex = startIndex + MAX_BLOGS_PER_PAGE
+  const currentMods = filteredBlogs.slice(startIndex, endIndex)
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      scrollIntoView(scrollTargetRef.current)
+      setCurrentPage(page)
+    }
+  }
+
   return (
     <div className='InnerBodyMain'>
       <div className='ContainerMain'>
-        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+        <div
+          className='IBMSecMainGroup IBMSecMainGroupAlt'
+          ref={scrollTargetRef}
+        >
           <div className='IBMSecMain'>
             <div className='SearchMainWrapper'>
               <div className='IBMSMTitleMain'>
@@ -156,48 +179,22 @@ export const BlogsPage = () => {
                 </div>
               </div>
             </div>
+          </div>
 
           <div className='IBMSecMain IBMSMListWrapper'>
             <div className='IBMSMList'>
-                {filteredBlogs &&
+              {currentMods &&
-                  filteredBlogs.map((b) => <BlogCard key={b.id} {...b} />)}
+                currentMods.map((b) => <BlogCard key={b.id} {...b} />)}
             </div>
           </div>
 
-            <div className='IBMSecMain'>
+          {totalPages > 1 && (
-              <div className='PaginationMain'>
+            <PaginationWithPageNumbers
-                <div className='PaginationMainInside'>
+              currentPage={currentPage}
-                  <a
+              totalPages={totalPages}
-                    className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
+              handlePageChange={handlePageChange}
-                    href='#'
+            />
-                  >
+          )}
-                    <i className='fas fa-chevron-left'></i>
-                  </a>
-                  <div className='PaginationMainInsideBoxGroup'>
-                    <a className='PaginationMainInsideBox PMIBActive' href='#'>
-                      <p>1</p>{' '}
-                    </a>
-                    <a className='PaginationMainInsideBox' href='#'>
-                      <p>2</p>{' '}
-                    </a>
-                    <a className='PaginationMainInsideBox' href='#'>
-                      <p>3</p>
-                    </a>
-                    <p className='PaginationMainInsideBox PMIBDots'>...</p>
-                    <a className='PaginationMainInsideBox' href='#'>
-                      <p>8</p>
-                    </a>
-                  </div>
-                  <a
-                    className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
-                    href='#'
-                  >
-                    <i className='fas fa-chevron-right'></i>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>