100 lines
3.2 KiB
JavaScript
100 lines
3.2 KiB
JavaScript
import { useState } from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
|
|
export default function Pagination({ pageNum, onChange }) {
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
const pages = [];
|
|
for (let i = 1; i <= pageNum; i++) {
|
|
pages.push(i);
|
|
}
|
|
|
|
const handleClick = (page) => {
|
|
setCurrentPage(page);
|
|
onChange(page);
|
|
};
|
|
|
|
const handleTogglePage = (type) => {
|
|
let current = currentPage;
|
|
if (type == "next")
|
|
current = current + 1 <= pageNum ? current + 1 : current;
|
|
else current = current - 1 >= 1 ? current - 1 : current;
|
|
setCurrentPage(current);
|
|
onChange(current);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<nav aria-label="Page navigation" className="flex justify-end">
|
|
<ul className="flex items-center -space-x-px h-8 text-sm mt-4 pr-0 font-bold">
|
|
<li>
|
|
<NavLink
|
|
onClick={() => {
|
|
handleTogglePage("previous");
|
|
}}
|
|
className=" flex items-center justify-center px-3 h-8 ms-0 leading-tight border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-white bg-emerald-700 border border-gray-300 hover:bg-emerald-700 hover:text-white"
|
|
>
|
|
<span className="sr-only">Previous</span>
|
|
<svg
|
|
className="w-2.5 h-2.5 rtl:rotate-180"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 6 10"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M5 1 1 5l4 4"
|
|
/>
|
|
</svg>
|
|
</NavLink>
|
|
</li>
|
|
{pages.map((page) => (
|
|
<li key={page}>
|
|
<NavLink
|
|
className={`${
|
|
currentPage == page ? "bg-emerald-700" : "bg-emerald-700"
|
|
} +
|
|
" flex items-center justify-center px-3 h-8 leading-tight text-white border border-gray-300 hover:bg-emerald-700 hover:text-white"`}
|
|
onClick={() => {
|
|
handleClick(page);
|
|
}}
|
|
>
|
|
{page}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<NavLink
|
|
onClick={() => {
|
|
handleTogglePage("next");
|
|
}}
|
|
className="flex items-center justify-center px-3 h-8 leading-tight border border-gray-300 rounded-e-lg text-white bg-emerald-700 border border-gray-300 hover:bg-emerald-700 hover:text-white"
|
|
>
|
|
<span className="sr-only">Next</span>
|
|
<svg
|
|
className="w-2.5 h-2.5 rtl:rotate-180"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 6 10"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="m1 9 4-4-4-4"
|
|
/>
|
|
</svg>
|
|
</NavLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|