80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import classNames from "classnames"
|
|
|
|
import { usePagination, usePaginationProps } from "hooks/use-pagination"
|
|
import Link from "next/link"
|
|
|
|
export interface PagerProps extends React.HTMLAttributes<HTMLElement> {
|
|
current: number
|
|
total: number
|
|
href: usePaginationProps["href"]
|
|
}
|
|
|
|
export function Pager({ current, total, href, ...props }: PagerProps) {
|
|
const items = usePagination({
|
|
current,
|
|
total,
|
|
href,
|
|
})
|
|
|
|
return (
|
|
<nav role="navigation" aria-labelledby="pagination-heading" {...props}>
|
|
<h4 className="sr-only">Pagination</h4>
|
|
<ul className="flex items-center justify-center w-auto">
|
|
{items.map((link, index) => (
|
|
<li key={index}>
|
|
{link.type === "previous" && (
|
|
<Link href={link.href as string}>
|
|
<a className="flex items-center justify-center w-12 h-12 hover:text-blue-500">
|
|
<span className="sr-only">Previous page</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="w-4 h-4"
|
|
>
|
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
</svg>
|
|
</a>
|
|
</Link>
|
|
)}
|
|
{link.type === "page" && (
|
|
<Link href={link.href as string} passHref>
|
|
<a
|
|
className={classNames(
|
|
"flex items-center justify-center w-12 h-12 hover:text-blue-500",
|
|
{
|
|
"text-gray-500": link.isCurrent,
|
|
}
|
|
)}
|
|
>
|
|
{link.display}
|
|
</a>
|
|
</Link>
|
|
)}
|
|
{link.type === "next" && (
|
|
<Link href={link.href as string}>
|
|
<a className="flex items-center justify-center w-12 h-12 hover:text-blue-500">
|
|
<span className="sr-only">Next page</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="w-4 h-4"
|
|
>
|
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|