legalgo-FE-reactrouter/app/components/ui/pagination.tsx

import React from 'react'

import { ChevronIcon } from '~/components/icons/chevron'
import { ChevronDoubleIcon } from '~/components/icons/chevron-double'

type PaginationProperties = {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
}

export const Pagination: React.FC<PaginationProperties> = ({
  currentPage = 1,
  totalPages,
  onPageChange,
}) => {
  const renderPageNumbers = () => {
    const pages = []
    for (let index = 1; index <= totalPages; index++) {
      pages.push(
        <button
          key={index}
          onClick={() => onPageChange(index)}
          className={`rounded-lg px-3 py-1 ${
            currentPage === index ? 'bg-[#2E2F7C] text-white' : 'text-gray-500'
          }`}
        >
          {index}
        </button>,
      )
    }
    return pages
  }

  return (
    <div className="flex items-center justify-center space-x-2 text-[#2E2F7C]">
      <button
        onClick={() => onPageChange(1)}
        disabled={currentPage === 1}
      >
        <ChevronDoubleIcon />
      </button>
      <button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
      >
        <ChevronIcon className="rotate-90" />
      </button>

      {renderPageNumbers()}

      <button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        <ChevronIcon className="rotate-270" />
      </button>
      <button
        onClick={() => onPageChange(totalPages)}
        disabled={currentPage === totalPages}
      >
        <ChevronDoubleIcon className="rotate-180" />
      </button>
    </div>
  )
}