update

frontEnd/components/pages/blog/BlogItems.tsx

@@ -0,0 +1,150 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import PostFilterItems from "./post-filter/PostFilterItems";
+
+const BlogItems = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const postsPerPage = 6;
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+      // Scroll to top of posts section
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  const handleTotalPagesChange = (total: number) => {
+    setTotalPages(total);
+  };
+
+  // Generate page numbers to display
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxPagesToShow = 5;
+
+    if (totalPages <= maxPagesToShow) {
+      // Show all pages if total is small
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Show first page
+      pages.push(1);
+
+      // Calculate range around current page
+      let startPage = Math.max(2, currentPage - 1);
+      let endPage = Math.min(totalPages - 1, currentPage + 1);
+
+      // Add ellipsis after first page if needed
+      if (startPage > 2) {
+        pages.push('...');
+      }
+
+      // Add pages around current page
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(i);
+      }
+
+      // Add ellipsis before last page if needed
+      if (endPage < totalPages - 1) {
+        pages.push('...');
+      }
+
+      // Show last page
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  return (
+    <section className="fix-top pb-120 blog-m">
+      <div className="container">
+        <div className="row align-items-center vertical-column-gap">
+          <div className="col-12 col-lg-7">
+            <h2 className="mt-8 fw-7 text-secondary title-anim">Latest Company Insights</h2>
+          </div>
+          <div className="col-12 col-lg-5">
+            <form action="#" method="post" autoComplete="off">
+              <div className="search-form">
+                <input
+                  type="search"
+                  name="search-post"
+                  id="searchPost"
+                  placeholder="Search"
+                  required
+                />
+                <button
+                  type="submit"
+                  aria-label="search post"
+                  title="search post"
+                >
+                  <i className="fa-solid fa-magnifying-glass"></i>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+        <PostFilterItems 
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+          onTotalPagesChange={handleTotalPagesChange}
+          postsPerPage={postsPerPage}
+        />
+        {totalPages > 1 && (
+          <div className="row mt-60">
+            <div className="col-12">
+              <div className="section__cta">
+                <ul className="pagination">
+                  <li>
+                    <button
+                      onClick={() => handlePageChange(currentPage - 1)}
+                      disabled={currentPage === 1}
+                      aria-label="Previous page"
+                      style={{ opacity: currentPage === 1 ? 0.5 : 1, cursor: currentPage === 1 ? 'not-allowed' : 'pointer' }}
+                    >
+                      <i className="fa-solid fa-angle-left"></i>
+                    </button>
+                  </li>
+                  {getPageNumbers().map((page, index) => (
+                    <li key={index}>
+                      {typeof page === 'number' ? (
+                        <button
+                          onClick={() => handlePageChange(page)}
+                          className={currentPage === page ? 'active' : ''}
+                          aria-label={`Go to page ${page}`}
+                          aria-current={currentPage === page ? 'page' : undefined}
+                        >
+                          {page}
+                        </button>
+                      ) : (
+                        <span style={{ padding: '0 10px' }}>{page}</span>
+                      )}
+                    </li>
+                  ))}
+                  <li>
+                    <button
+                      onClick={() => handlePageChange(currentPage + 1)}
+                      disabled={currentPage === totalPages}
+                      aria-label="Next page"
+                      style={{ opacity: currentPage === totalPages ? 0.5 : 1, cursor: currentPage === totalPages ? 'not-allowed' : 'pointer' }}
+                    >
+                      <i className="fa-solid fa-angle-right"></i>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default BlogItems;