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 */} {/* show prev and next button if data exist */}
{data.length > 0 && ( {data.length > 0 && (
<div className="mt-10 w-full flex gap-4 justify-center items-center"> <div className="mt-10 w-full flex gap-4 justify-center items-center">
<button <button
onClick={handlePrev} onClick={handlePrev}
className={`w-12 h-12 rounded-full flex justify-center items-center border ${ className={`w-12 h-12 rounded-full flex justify-center items-center transition-all duration-300 ${
currentPage == 0 currentPage == 0
? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none" ? "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-slate-300 dark:border-slate-300" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
} transition-all duration-500`} }`}
> >
&lt; &lt;
</button> </button>
<button
onClick={handleNext} {data.length && data.map((item, index)=>{
className={`w-12 h-12 rounded-full flex justify-center items-center border ${ if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
currentPage + numberOfSelection >= data.length return (
? "text-slate-300 border-slate-300 dark:text-slate-400 dark:border-slate-400 pointer-events-none" <button
: "text-slate-600 border-slate-600 dark:text-slate-300 dark:border-slate-300" onClick={handleNext}
} transition-all duration-500`} className={`w-12 h-12 rounded-full flex justify-center items-center border transition-all duration-300 ${
> currentPage != index
&gt; ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
</button> : "text-slate-600 border-slate-600 dark:text-white dark:border-white pointer-events-none"
</div> }`}
>
{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> </div>
); );