btrc-hub/frontend/src/components/common/Pagination.tsx

import { useLocation } from 'react-router-dom'

import PrefetchLink from '@/components/PrefetchLink'

import type { FC } from 'react'

type Props = { page:          number
	       totalPages:    number
	       siblingCount?: number }


const range = (start: number, end: number): number[] =>
    [...Array (end - start + 1).keys ()].map (i => start + i)


const getPages = (
    page:         number,
    total:        number,
    siblingCount: number,
): (number | '…')[] => {
  if (total <= 1)
    return [1]

  const first = 1
  const last = total

  const left = Math.max (page - siblingCount, first)
  const right = Math.min (page + siblingCount, last)

  const pages: (number | '…')[] = []

  pages.push (first)

  if (left > first + 1)
    pages.push ('…')

  const midStart = Math.max (left, first + 1)
  const midEnd = Math.min (right, last - 1)
  pages.push (...range (midStart, midEnd))

  if (right < last - 1)
    pages.push ('…')

  if (last !== first)
    pages.push (last)

  return pages.filter ((v, i, arr) => i === 0 || v !== arr[i - 1])
}


export default (({ page, totalPages, siblingCount = 2 }) => {
  const location = useLocation ()

  const buildTo = (p: number) => {
    const qs = new URLSearchParams (location.search)
    qs.set ('page', String (p))
    return `${ location.pathname }?${ qs.toString () }`
  }

  const pages = getPages (page, totalPages, siblingCount)

  return (
      <nav className="mt-4 flex justify-center" aria-label="Pagination">
	<div className="flex items-center gap-2">
	  {(page > 1)
	   ? (
	      <PrefetchLink
		  className="p-2"
		  to={buildTo (page - 1)}
		  aria-label="前のページ">
		&lt;
	      </PrefetchLink>)
	   : <span className="p-2" aria-hidden>&lt;</span>}

	  {pages.map ((p, idx) => (
	      (p === '…')
	      ? <span key={`dots-${ idx }`} className="p-2">…</span>
	      : ((p === page)
		 ? <span key={p} className="font-bold p-2" aria-current="page">{p}</span>
		 : <PrefetchLink key={p} className="p-2" to={buildTo (p)}>{p}</PrefetchLink>)))}

	  {(page < totalPages)
	   ? (
	      <PrefetchLink
		  className="p-2"
		  to={buildTo (page + 1)}
		  aria-label="次のページ">
		&gt;
	      </PrefetchLink>)
	   : <span className="p-2" aria-hidden>&gt;</span>}
	</div>
      </nav>)
}) satisfies FC<Props>