i have next.js project. and i need to replace infinite loader on index.tsx page with paging, like on aliexpress website. note that i do not know total pages number, so i will made it like 'prev 1 2 3 ... next', 'prev 4 5 6 ... next', etc.

here is pages/index.tsx

import { MainPageDataType, MatterType, TagType } from "@/helpers/types";
import { GetServerSideProps, NextPage } from "next";
import { getMainPageData } from "@/helpers/getInstance";
import { usePlatform } from "@/helpers/platformContext";
import MattersList from "@/components/MattersList";
import InfScroll from "@/components/InfScroll";
import Loading from "@/components/Loading";
import useMatters from "@/helpers/useMatters";
import { serverApi } from "@/helpers/api";
import { useDevice } from "@/helpers/deviceContext";
import dynamic from "next/dynamic";
import Banner from "@/components/Banner";
import useToplineTransparenty from "@/helpers/useToplineTransparenty";
import EditButton from "@/components/EditButton";
import { SlugEnum } from "@/helpers/slugEnums";
import withDateToken from "@/helpers/withDateToken";

const MobileStory = dynamic(() => import("@/components/IndexPage/MobileStory"));
const DayPictureMobile = dynamic(
  () => import("@/components/IndexPage/DayPictureMobile")
);
const DayPictureDesktop = dynamic(
  () => import("@/components/IndexPage/DayPictureDesktop")
);
const MobileBottomTabs = dynamic(() => import("@/components/MobileBottomTabs"));

const endpoint = "main_page/matters";
type PropsType = MainPageDataType & {
  initialMatters: MatterType[];
};

const IndexPage: NextPage<PropsType> = ({
  day_picture,
  stories,
  initialMatters,
  day_picture_type,
}) => {
  const { isMobile } = useDevice();
  const { live_config, h1_title_on_main_page, settings_custom } = usePlatform();
  const secondStory = stories ? stories[1]?.story : undefined;
  let firstItem: MatterType | TagType | undefined = day_picture[0]?.matter?.path
    ? day_picture[0]?.matter
    : undefined;
  if (stories && stories[0]?.story) firstItem = stories[0].story;
  if (live_config && (settings_custom.live_mainpage ?? true)) {
    firstItem = live_config;
  }

  const otherItems = day_picture
    ?.filter((el) => el.matter?.path && el.matter?.path !== firstItem?.path)
    .map((el) => el.matter)
    .slice(0, 5);

  const [{ matters, loading }, getMatters] = useMatters({
    initialMatters,
    endpoint,
  });

  useToplineTransparenty(!!day_picture && !!day_picture[0]?.matter?.path); // картины дня может не быть при ошибках на стороне api
  return (
    <>
      {isMobile && firstItem ? (
        <>
          <MobileBottomTabs />
          <DayPictureMobile
            firstItem={firstItem}
            otherItems={otherItems}
            extraPaddingBottom={!!secondStory}
          />
        </>
      ) : (
        firstItem && (
          <DayPictureDesktop
            firstItem={firstItem}
            otherItems={otherItems}
            secondStory={secondStory}
            dayPictureType={day_picture_type}
          />
        )
      )}
      <div className="container">
        {isMobile && secondStory && <MobileStory item={secondStory} />}
      </div>
      <Banner className="my-4" slug={SlugEnum.mainpage_story_after} />
      <Banner
        className="max-w-[826px] mx-auto"
        slug={SlugEnum.mainpage_story_after_2}
      />
      <div className="container">
        <h1 className={"text-lg font-bold mb-[19px] lg:font-serif lg:text-[35px] lg:mb-[38px] max-w-[826px] mx-auto" + (isMobile ? (secondStory ? " mt-[10px]" : " mt-[30px]") : "")}>
          {withDateToken(h1_title_on_main_page)}
        </h1>
        <MattersList
          matters={matters}
          bannerSlug={SlugEnum.mainpage_feed}
          additionalBannerSlug={SlugEnum.mainpage_feed_3}
          showPeriod={false}
          initialMattersLength={
            initialMatters?.length ? initialMatters.length : 0
          }
        />
        <InfScroll onLoad={getMatters} loading={loading} />
        {loading && <Loading />}
        <EditButton url={"/admin/publishers/homepage"} />
      </div>
    </>
  );
};

export default IndexPage;

export const getServerSideProps: GetServerSideProps<PropsType> = async ({
  req,
}) => {
  const results = await Promise.all([
    getMainPageData(req),
    serverApi<MatterType[]>(endpoint, { req }, []),
  ]);

  return "notFound" in results[0] || "notFound" in results[1]
    ? { notFound: true }
    : {
      props: {
        ...results[0].mainPageData,
        initialMatters: results[1].data,
      },
    };
};


here is helpers/useMatters.ts

import { useEffect, useState } from "react";
import api from "@/helpers/api";
import error from "./error";
import { MatterType } from "./types";

type PropsType<T = MatterType> = {
  initialMatters?: T[];
  params?: { [key: string]: unknown };
  endpoint?: string;
  initialPage?: number;
};

type ReturnType<T = MatterType> = [
  { matters: T[]; loading: boolean; allLoaded: boolean },
  (reset: boolean) => void
];

export default function useMatters<T = MatterType>({
  initialMatters = [],
  params = {},
  endpoint = "matters",
  initialPage = 2,
}: PropsType<T>): ReturnType<T> {
  const [matters, setMatters] = useState(initialMatters);
  const [allLoaded, setAllLoaded] = useState(false);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(initialPage);
  const [key, setKey] = useState(1);

  useEffect(() => {
    if (loading || allLoaded || key >= 1) return;
    setLoading(true);
    void doFetch();

    async function doFetch() {
      try {
        // response could be [...] or {matters: [...]}
        const { data } = await api.get<T[] | { matters: T[] }>(endpoint, {
          params: { ...params, page },
        });
        const items = "matters" in data ? data.matters : data;
        setMatters(matters.concat(items));
        setLoading(false);
        setPage(page + 1);
        if (!items.length) {
          setAllLoaded(true);
        }
      } catch (e) {
        error(e);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key]);

  function getMatters(reset = false) {
    if (reset) {
      setMatters([]);
      setAllLoaded(false);
      setLoading(false);
      setPage(1);
    }
    setKey(Math.random());
  }

  return [{ matters, loading, allLoaded }, getMatters];
}

and i want components/Paging.tsx be like this 

 import React from 'react';                                                                                                                                                                                                                                                                                                
  1                                                                                                                                                                                                                                                                                                                           
  2 interface PagingProps {                                                                                                                                                                                                                                                                                                   
  3 │ currentPage: number;                                                                                                                                                                                                                                                                                                    
  4 │ onPageChange: (newPage: number) => void;                                                                                                                                                                                                                                                                                
  5 │ hasMore: boolean;                                                                                                                                                                                                                                                                                                       
  6 │ range: number;                                                                                                                                                                                                                                                                                                          
  7 }                                                                                                                                                                                                                                                                                                                         
  8                                                                                                                                                                                                                                                                                                                           
  9 const Paging: React.FC<PagingProps> = ({ currentPage, onPageChange, hasMore, range }) => {                                                                                                                                                                                                                                
 10 │ const generatePageNumbers = () => {                                                                                                                                                                                                                                                                                     
 11 │ │ const pages = [];                                                                                                                                                                                                                                                                                                     
 12 │ │ const start = Math.max(1, currentPage - 1);                                                                                                                                                                                                                                                                           
 13 │ │ for (let i = start; i <= start + range && (i === currentPage || i === start || hasMore); i++) {                                                                                                                                                                                                                       
 14 │ │ │ pages.push(i);                                                                                                                                                                                                                                                                                                      
 15 │ │ }                                                                                                                                                                                                                                                                                                                     
 16 │ │ return pages;                                                                                                                                                                                                                                                                                                         
 17 │ };                                                                                                                                                                                                                                                                                                                      
 18 │                                                                                                                                                                                                                                                                                                                         
 19 │ const pages = generatePageNumbers();                                                                                                                                                                                                                                                                                    
 20 │                                                                                                                                                                                                                                                                                                                         
 21 │ return (                                                                                                                                                                                                                                                                                                                
 22 │ │ <div className="paging">                                                                                                                                                                                                                                                                                              
 23 │ │ │ <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1}>                                                                                                                                                                                                                                 
 24 │ │ │ │ Previous                                                                                                                                                                                                                                                                                                          
 25 │ │ │ </button>                                                                                                                                                                                                                                                                                                           
 26 │ │ │                                                                                                                                                                                                                                                                                                                     
 27 │ │ │ {pages[0] > 1 && <span>...</span>}                                                                                                                                                                                                                                                                                  
 28 │ │ │                                                                                                                                                                                                                                                                                                                     
 29 │ │ │ {pages.map(page => (                                                                                                                                                                                                                                                                                                
 30 │ │ │ │ <button                                                                                                                                                                                                                                                                                                           
 31 │ │ │ │ │ key={page}                                                                                                                                                                                                                                                                                                      
 32 │ │ │ │ │ onClick={() => onPageChange(page)}                                                                                                                                                                                                                                                                              
 33 │ │ │ │ │ className={currentPage === page ? 'active' : ''}                                                                                                                                                                                                                                                                
 34 │ │ │ │ │ disabled={currentPage === page}                                                                                                                                                                                                                                                                                 
 35 │ │ │ │ >                                                                                                                                                                                                                                                                                                                 
 36 │ │ │ │ │ {page}                                                                                                                                                                                                                                                                                                          
 37 │ │ │ │ </button>                                                                                                                                                                                                                                                                                                         
 38 │ │ │ ))}                                                                                                                                                                                                                                                                                                                 
 39 │ │ │                                                                                                                                                                                                                                                                                                                     
 40 │ │ │ {hasMore && <span>...</span>}                                                                                                                                                                                                                                                                                       
 41 │ │ │                                                                                                                                                                                                                                                                                                                     
 42 │ │ │ <button onClick={() => onPageChange(currentPage + 1)} disabled={!hasMore}>                                                                                                                                                                                                                                          
 43 │ │ │ │ Next                                                                                                                                                                                                                                                                                                              
 44 │ │ │ </button>                                                                                                                                                                                                                                                                                                           
 45 │ │ │                                                                                                                                                                                                                                                                                                                     
 46 │ │ │ <style jsx>{`                                                                                                                                                                                                                                                                                                       
 47 │ │ │ │ .paging {                                                                                                                                                                                                                                                                                                         
 48 │ │ │ │ │ display: flex;                                                                                                                                                                                                                                                                                                  
 49 │ │ │ │ │ justify-content: center;                                                                                                                                                                                                                                                                                        
 50 │ │ │ │ │ align-items: center;                                                                                                                                                                                                                                                                                            
 51 │ │ │ │ │ margin: 20px 0;                                                                                                                                                                                                                                                                                                 
 52 │ │ │ │ }                                                                                                                                                                                                                                                                                                                 
 53 │ │ │ │ button {                                                                                                                                                                                                                                                                                                          
 54 │ │ │ │ │ border: none;                                                                                                                                                                                                                                                                                                   
 55 │ │ │ │ │ background-color: lightgray;                                                                                                                                                                                                                                                                                    
 56 │ │ │ │ │ margin: 0 5px;                                                                                                                                                                                                                                                                                                  
 57 │ │ │ │ │ padding: 5px 10px;                                                                                                                                                                                                                                                                                              
 58 │ │ │ │ │ cursor: pointer;                                                                                                                                                                                                                                                                                                
 59 │ │ │ │ }                                                                                                                                                                                                                                                                                                                 
 60 │ │ │ │ button:disabled {                                                                                                                                                                                                                                                                                                 
 61 │ │ │ │ │ cursor: not-allowed;                                                                                                                                                                                                                                                                                            
 62 │ │ │ │ │ background-color: darkgray;                                                                                                                                                                                                                                                                                     
 63 │ │ │ │ }                                                                                                                                                                                                                                                                                                                 
 64 │ │ │ │ .active {                                                                                                                                                                                                                                                                                                         
 65 │ │ │ │ │ font-weight: bold;                                                                                                                                                                                                                                                                                              
 66 │ │ │ │ }                                                                                                                                                                                                                                                                                                                 
 67 │ │ │ │ span {                                                                                                                                                                                                                                                                                                            
 68 │ │ │ │ │ margin: 0 5px;                                                                                                                                                                                                                                                                                                  
 69 │ │ │ │ │ color: gray;                                                                                                                                                                                                                                                                                                    
 70 │ │ │ │ }                                                                                                                                                                                                                                                                                                                 
 71 │ │ │ `}</style>                                                                                                                                                                                                                                                                                                          
 72 │ │ </div>                                                                                                                                                                                                                                                                                                                
 73 │ );                                                                                                                                                                                                                                                                                                                      
 74 };                                                                                                                                                                                                                                                                                                                        
 75                                                                                                                                                                                                                                                                                                                           
 76 export default Paging;       


please write everything