Movie_Search/Pagination.tsx

import { ReactEventHandler, useState } from "react";
export default function Pagination({ pages, onPageChange, currentPage }: any) {
  const [page, setPage] = useState(currentPage);
  const handleClick = (e: any) => {
    const { value } = e.target;
    let newPage;

    if (isNaN(parseInt(value))) {
      switch (value) {
        case "<<":
          // goto start
          newPage = 0;
          break;
        case "<":
          newPage = page - 1;
          break;
        case ">":
          newPage = page + 1;
          break;
        case ">>":
          //goto end
          newPage = pages.length - 1;
          break;

        default:
          break;
      }
    } else {
      newPage = value;
    }

    setPage(newPage);
    onPageChange(newPage);
  };

  //   useEffect(() => {
  //     onPageChange(page);
  //   }, [page]);

  const QuickLink = ({ value }: { value: string }) => {
    return (
      <a
        href="#"
        style={{ fontWeight: value == page ? "bold" : "normal" }}
        // value={value}
        onClick={handleClick}
      >
        {value}
      </a>
    );
  };

  return (
    <>
      <QuickLink value={"<<"} />
      <QuickLink value={"<"} />
      {pages.map((p: number) => (
        <QuickLink value={p.toString()} />
      ))}
      <QuickLink value={">"} />
      <QuickLink value={">>"} />
    </>
  );
}