68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { FC } from "react";
|
|
|
|
type Props = {
|
|
totalPages: number;
|
|
currentPage: number;
|
|
onPageChange: (page: number) => void;
|
|
};
|
|
|
|
export const Pagination: FC<Props> = ({
|
|
totalPages,
|
|
currentPage,
|
|
onPageChange,
|
|
}) => {
|
|
return (
|
|
<ul className="flex justify-center gap-3 my-10">
|
|
{currentPage > 1 && (
|
|
<li>
|
|
<button
|
|
className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
|
|
aria-label="Previous page"
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="size-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
)}
|
|
|
|
<li className="text-sm/8 font-medium tracking-widest">
|
|
{currentPage}/{totalPages}
|
|
</li>
|
|
|
|
{currentPage < totalPages && (
|
|
<li>
|
|
<button
|
|
className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
|
|
aria-label="Next page"
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="size-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
);
|
|
};
|