This repository has no description
Something went wrong. Try again.
1.7 kB · 60 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061import Link from 'next/link'import clsx from 'clsx'
interface PaginationProps { current: number total: number basePath: string className?: string}
function pageUrl(basePath: string, page: number): string { if (page <= 1) return basePath return `${basePath}/page/${page}`}
export function Pagination({ current, total, basePath, className }: PaginationProps) { const btnBase = 'font-mono text-[11px] tracking-wider uppercase px-4 py-2.5 border rounded-sm transition-colors' const btnActive = `${btnBase} text-ink border-hair-2 hover:border-ink` const btnDisabled = `${btnBase} text-ink-3 border-white/5 cursor-default`
const prevUrl = current > 1 ? pageUrl(basePath, current - 1) : null const nextUrl = current < total ? pageUrl(basePath, current + 1) : null
return ( <nav aria-label="Pagination" className={clsx('border-hair flex items-center justify-between gap-4 border-t py-5', className)} > {prevUrl ? ( <Link className={btnActive} href={prevUrl} aria-label={`Go to page ${current - 1} of ${total}`} > ← Previous </Link> ) : ( <span className={btnDisabled}>← Previous</span> )} <span className="text-ink-3 font-mono text-[11px] tracking-[0.14em] uppercase" aria-current="page" > Page {current} of {total} </span> {nextUrl ? ( <Link className={btnActive} href={nextUrl} aria-label={`Go to page ${current + 1} of ${total}`} > Next → </Link> ) : ( <span className={btnDisabled}>Next →</span> )} </nav> )}