88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
|
|
const Pagination = ({ page, setPage, showItem, total, limit }) => {
|
|
const [lastPage, SetLastPage] = useState(Math.ceil(total / limit));
|
|
|
|
const clickPage = (value) => {
|
|
setPage(value);
|
|
};
|
|
|
|
const previusPage = () => {
|
|
setPage(page - 1);
|
|
};
|
|
|
|
const nextPage = () => {
|
|
setPage(page + 1);
|
|
};
|
|
|
|
useEffect(() => {
|
|
SetLastPage(Math.ceil(total / limit));
|
|
}, [total, showItem]);
|
|
|
|
return (
|
|
<div className="w-full h-fit flex flex-col md:flex-row mt-8 justify-center items-center md:justify-between gap-2 mb-4">
|
|
<div>
|
|
Showing <span className="font-bold">{showItem}</span> From{" "}
|
|
<span className="font-bold">{total}</span> Data
|
|
</div>
|
|
<div className="flex flex-row gap-1">
|
|
{page > 1 ? (
|
|
<div
|
|
onClick={previusPage}
|
|
className="flex px-3 py-1 hover:bg-gray-100 cursor-pointer rounded-md border-[2px] duration-300 ease-in-out"
|
|
>
|
|
{"<"}
|
|
</div>
|
|
) : undefined}
|
|
|
|
{lastPage <= 1
|
|
? undefined
|
|
: Array.from({ length: lastPage }, (_, index) => {
|
|
const pageNumber = index + 1;
|
|
|
|
if (pageNumber === 1 || pageNumber === lastPage) {
|
|
return (
|
|
<div
|
|
onClick={() => clickPage(pageNumber)}
|
|
key={index}
|
|
className={`flex px-3 py-1 ${
|
|
page === pageNumber
|
|
? "bg-slate-900 text-white"
|
|
: "hover:bg-gray-200"
|
|
} rounded-md border-[2px] duration-300 ease-in-out cursor-pointer`}
|
|
>
|
|
{pageNumber}
|
|
</div>
|
|
);
|
|
} else if (Math.abs(page - pageNumber) <= 1) {
|
|
return (
|
|
<div
|
|
onClick={() => clickPage(pageNumber)}
|
|
key={index}
|
|
className={`flex px-3 py-1 ${
|
|
page === pageNumber
|
|
? "bg-slate-900 text-white dark:text-white"
|
|
: "hover:bg-gray-200"
|
|
} rounded-md border-[2px] duration-300 ease-in-out cursor-pointer`}
|
|
>
|
|
{pageNumber}
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
|
|
{page < lastPage ? (
|
|
<div
|
|
onClick={nextPage}
|
|
className="flex px-3 py-1 hover:bg-gray-100 cursor-pointer rounded-md border-[2px] duration-300 ease-in-out"
|
|
>
|
|
{">"}
|
|
</div>
|
|
) : undefined}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|