Build Havaran storefront with Meshkee-backed blogs and portfolios.

Clone product, solution, and company pages from the original site and wire articles/projects to the Meshkee Website API with pagination and media from the backend CDN.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/Pagination.tsx

@@ -0,0 +1,81 @@
+type PaginationProps = {
+  basePath: string;
+  page: number;
+  pageSize: number;
+  total: number;
+};
+
+function buildHref(basePath: string, page: number) {
+  if (page <= 1) return basePath;
+  return `${basePath}?page=${page}`;
+}
+
+function pageItems(current: number, totalPages: number): (number | "…")[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const items: (number | "…")[] = [1];
+  const start = Math.max(2, current - 1);
+  const end = Math.min(totalPages - 1, current + 1);
+
+  if (start > 2) items.push("…");
+  for (let p = start; p <= end; p += 1) items.push(p);
+  if (end < totalPages - 1) items.push("…");
+  items.push(totalPages);
+  return items;
+}
+
+export function Pagination({ basePath, page, pageSize, total }: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  if (totalPages <= 1) return null;
+
+  const current = Math.min(Math.max(1, page), totalPages);
+  const pages = pageItems(current, totalPages);
+
+  return (
+    <nav className="pagination-nav" aria-label="صفحه‌بندی">
+      <ul className="pagination-list">
+        <li>
+          {current > 1 ? (
+            <a href={buildHref(basePath, current - 1)} className="pagination-link">
+              قبلی
+            </a>
+          ) : (
+            <span className="pagination-link is-disabled">قبلی</span>
+          )}
+        </li>
+
+        {pages.map((item, index) =>
+          item === "…" ? (
+            <li key={`ellipsis-${index}`}>
+              <span className="pagination-ellipsis">…</span>
+            </li>
+          ) : (
+            <li key={item}>
+              {item === current ? (
+                <span className="pagination-link is-active" aria-current="page">
+                  {item}
+                </span>
+              ) : (
+                <a href={buildHref(basePath, item)} className="pagination-link">
+                  {item}
+                </a>
+              )}
+            </li>
+          ),
+        )}
+
+        <li>
+          {current < totalPages ? (
+            <a href={buildHref(basePath, current + 1)} className="pagination-link">
+              بعدی
+            </a>
+          ) : (
+            <span className="pagination-link is-disabled">بعدی</span>
+          )}
+        </li>
+      </ul>
+    </nav>
+  );
+}