item per page pagination

import React from "react";
import Nextsvg from "@/assets/nextsvg.svg"
import Previewsvg from "@/assets/previewssvg.svg"
import "./pagination.scss"

function Pagination({
  currentPage,
  totalPages,
  onPageChange,
  itemsPerPage,
  onItemsPerPageChange,
}:any) {
  const getPageNumbers = () => {
    const pageNumbers = [];
    const visiblePages = 3; // Number of visible page links

    if (totalPages <= visiblePages) {
      // If the total number of pages is less than or equal to the visible pages,
      // show all page links
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
      }
    } else {
      // If the total number of pages is greater than the visible pages,
      // calculate the range of page links to display based on the current page

      let startPage = currentPage - Math.floor(visiblePages / 2);
      let endPage = currentPage + Math.floor(visiblePages / 2);

      if (startPage < 1) {
        // Adjust the start and end page numbers if they go below 1 or above the total pages
        endPage += Math.abs(startPage) + 1;
        startPage = 1;
      }

      if (endPage > totalPages) {
        // Adjust the start and end page numbers if they go above the total pages
        startPage -= endPage - totalPages;
        endPage = totalPages;
      }

      for (let i = startPage; i <= endPage; i++) {
        pageNumbers.push(i);
      }
    }

    return pageNumbers;
  };

  return (
    <nav>
      <div className="flex justify-between items-center mb-4">
       
      <ul className="pagination flex justify-between  ">
       <li className={`page-item mr-6 ${currentPage === 1 ? "disabled" : ""}`} onClick={() => onPageChange(currentPage - 1)}>
         <span className="page-link" >
          <Previewsvg/>
         </span>
       </li>
       {getPageNumbers().map((pageNumber) => (
         <li
           key={pageNumber}
           className={`page-item ml-1 ${pageNumber === currentPage ? "active " : ""}`} onClick={() => onPageChange(pageNumber)}
         >
           <span className="" >
             {pageNumber}
           </span>
         </li>
       ))}
       <li className={`page-item ml-6 ${currentPage === totalPages ? "disabled " : ""}`} onClick={() => onPageChange(currentPage + 1)}>
         <span className="page-link ">
         <Nextsvg/>
         </span>
       </li>
     </ul>
      </div>
    </nav>
  );
}

export default Pagination;


 
   
 import React, { useState, useEffect } from "react";
import Image from "next/image";
import Ethereum from "../../assets/ethereum.svg";
import Polygon from "../../assets/polygon.svg";
import { metacollectibles } from "@/assets/dummyData";
import Pagination from "@/components/Pagination/pagination";

const Mainsection = () => {
  const [products, setProduct] = useState(metacollectibles);
  const [itemsPerPage, setItemsPerPage] = useState(12);
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(products.length / itemsPerPage);

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage - 1;

  const handlePageChange = (pageNumber: any) => {
    if (pageNumber >= 1 && pageNumber <= totalPages) {
      setCurrentPage(pageNumber);
    }
  };
  const handleItemsPerPageChange = (newItemsPerPage:any) => {
    setItemsPerPage(newItemsPerPage);
    setCurrentPage(1); // Reset to the first page when changing items per page
  };

  return (
    <>
      {products.slice(startIndex, endIndex + 1).map((item, index) => {
        return (
          <>
            <div className="main-footer-card " key={index}>
              <div className="px-[14px] py-[21px] flex flex-col gap-[14px]">
                <div>
                  <Image src={item.imageUrl} alt="" />
                </div>
                <div className="flex justify-between">
                  <span className="main-footer-card-heading">
                    {item.heading}
                  </span>
                  <div className="flex flex-row gap-1">
                    <div className="main-footer-card-icon">
                      <Polygon />
                    </div>
                    <div className="main-footer-card-icon">
                      <Ethereum />
                    </div>
                  </div>
                </div>
                <div className="main-footer-card-footer">
                  <div className="flex flex-col gap-1 ">
                    <span className="main-footer-card-maintext">
                      {item.latestBid}
                    </span>
                    <span className="main-footer-card-smalltext">MANA</span>
                  </div>
                  <div className="flex justify-between gap-3">
                    <div className="flex flex-col gap-1">
                      <span className="main-footer-card-maintext">
                        {item.price}
                      </span>
                      <span className="main-footer-card-pricetext">USD</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        );
      })}
     
      <div className=" flex justify-between mt-2 w-full px-8 text-[#8D8E8D] text-[16px] font-normal items-center">
      <div className="flex items-center">
        <div className="flex h-[40px] py-[10px] px-[14px] items-center rounded-2xl">
        <select
          id="itemsPerPage"
          onChange={(e) => handleItemsPerPageChange(Number(e.target.value))}
          value={itemsPerPage}
          className="flex h-[40px] py-[10px] px-[14px] items-center rounded-2xl bg-[#1E2121] border border-[#E7E8E7]"
        >
          <option value="09">09</option>
          <option value="12">12</option>
          <option value="24">24</option>
          <option value="36">36</option>
          {/* Add more options as needed */}
        </select>
        </div>
        <div>
          Showing &nbsp; {startIndex + 1} -&nbsp;
          {Math.min(endIndex + 1, products.length)} of &nbsp;
          {products.length}
        </div>
      </div>
        
        <div>
          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
          />
        </div>
      </div>
    </>
  );
};

export default Mainsection;


https://filetransfer.io/data-package/E6IeNvEa#link