WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added dummy pagination

Browse Source
This commit is contained in:
victorAnumudu
2024-03-22 16:18:19 +01:00
parent 30ce6a7d6e
commit 3541363f9f
1 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Pagination/NewPaginatedList.jsx
+39 -21
View File
@@ -74,27 +74,45 @@ export default function NewPaginatedList({
{/* show prev and next button if data exist */}
{data.length > 0 && (
<div className="mt-10 w-full flex gap-4 justify-center items-center">
<button
onClick={handlePrev}
className={`w-12 h-12 rounded-full flex justify-center items-center border ${
currentPage == 0
? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
: "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300"
} transition-all duration-500`}
>
&lt;
</button>
<button
onClick={handleNext}
className={`w-12 h-12 rounded-full flex justify-center items-center border ${
currentPage + numberOfSelection >= data.length
? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
: "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300"
} transition-all duration-500`}
>
&gt;
</button>
</div>
<button
onClick={handlePrev}
className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
currentPage == 0
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`}
>
&lt;
</button>
{data.length && data.map((item, index)=>{
if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
return (
<button
onClick={handleNext}
className={`w-12 h-12 rounded-full flex justify-center items-center border transition-all duration-300 ${
currentPage != index
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white pointer-events-none"
}`}
>
{index/itemsPerPage +1}
</button>
)
}
})}
<button
onClick={handleNext}
className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
currentPage + numberOfSelection >= data.length
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pointer-events-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`}
>
&gt;
</button>
</div>
)}
</div>
);