{"size": 1122, "ext": "js", "max_stars_repo_path": "src/components/blog/Pagination.js", "max_stars_repo_name": "ErikBahena/roose-paint-and-restoration", "max_stars_repo_stars_event_min_datetime": "2022-02-02T05:30:38.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-02T05:30:38.000Z", "max_issues_repo_path": "src/components/blog/Pagination.js", "max_issues_repo_name": "ErikBahena/roose-paint-and-restoration", "max_issues_repo_issues_event_min_datetime": "2022-01-30T05:31:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-01T02:27:05.000Z", "max_forks_repo_path": "src/components/blog/Pagination.js", "max_forks_repo_name": "ErikBahena/roose-paint-and-restoration", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 21.5769230769, "max_line_length": 63, "alphanum_fraction": 0.449197861}
import React from "react";

export default function Pagination({
  paginationPageCount,
  handleIndexChange,
  index,
}) {
  const pageNumberArr = Array.from(
    { length: paginationPageCount },
    (_, i) => i + 1
  );

  const handleArrowClick = (num) => {
    const newIndex = num + index;

    if (newIndex >= 0 && newIndex <= paginationPageCount - 1) {
      handleIndexChange(newIndex);
    }
  };

  return (
    <div className="basic-pagination">
      <nav>
        <ul>
          <li>
            <div onClick={() => handleArrowClick(-1)}>
              <i className="far fa-angle-left" />
            </div>
          </li>

          {pageNumberArr.map((num) => (
            <li>
              <div
                className={index + 1 === num && "active"}
                onClick={() => handleIndexChange(num - 1)}
              >
                {num}
              </div>
            </li>
          ))}

          <li>
            <div onClick={() => handleArrowClick(1)}>
              <i className="far fa-angle-right" />
            </div>
          </li>
        </ul>
      </nav>
    </div>
  );
}
