Desishub Lessons
Next JS and TypeScript
Ecommerce Snippets

Ecommerce Pagination

Am using Shads Pagination component: here in docs (opens in a new tab)

Pagination Componet

"use client";
 
import React from "react";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { useSearchParams } from "next/navigation";
 
export default function Paginate({ totalPages }) {
  const searchParams = useSearchParams();
  const sort = searchParams.get("sort") || "asc";
  const min = searchParams.get("min") || 0;
  const max = searchParams.get("max") || "";
  const currentPage = parseInt(searchParams.get("page")) || 1;
 
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href={`?${
              currentPage === 1
                ? new URLSearchParams({ page: "1", sort, min, max })
                : new URLSearchParams({
                    page: (currentPage - 1).toString(),
                    sort,
                    min,
                    max,
                  })
            }`}
          />
        </PaginationItem>
        {totalPages <= 3 ? (
          Array.from({ length: totalPages }, (_, index) => (
            <PaginationItem key={index}>
              <PaginationLink
                isActive={index + 1 === currentPage}
                href={`?${new URLSearchParams({
                  page: (index + 1).toString(),
                  sort,
                  min,
                  max,
                })}`}
              >
                {index + 1}
              </PaginationLink>
            </PaginationItem>
          ))
        ) : (
          <>
            {Array.from({ length: 3 }, (_, index) => (
              <PaginationItem key={index}>
                <PaginationLink
                  href={`?${new URLSearchParams({
                    page: (index + 1).toString(),
                    sort,
                    min,
                    max,
                  })}`}
                >
                  {index + 1}
                </PaginationLink>
              </PaginationItem>
            ))}
            <PaginationItem>
              <PaginationEllipsis />
            </PaginationItem>
          </>
        )}
        <PaginationItem>
          <PaginationNext
            href={`?${
              currentPage == totalPages
                ? new URLSearchParams({
                    page: totalPages.toString(),
                    sort,
                    min,
                    max,
                  })
                : new URLSearchParams({
                    page: (currentPage + 1).toString(),
                    sort,
                    min,
                    max,
                  })
            }`}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}