Compare commits

...

1 Commits

Author SHA1 Message Date
victorAnumudu 0e0066fec3 list pagination modified 2024-05-10 11:49:31 +01:00
2 changed files with 17 additions and 17 deletions
@@ -89,24 +89,24 @@ export default function RecentBVNList({
<div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center"> <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
<button <button
onClick={handlePrev} onClick={handlePrev}
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
currentPage == 0 currentPage == 0
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
&lt; &lt; Previous
</button> </button>
{data.length && data.map((item, index)=>{ {/* {data.length && data.map((item, index)=>{
item = item item = item
if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){ if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
return ( return (
<button <button
key={index} key={index}
onClick={handleNext} onClick={handleNext}
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
currentPage != index currentPage != index
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400" ? "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 pe-none" : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
@@ -117,18 +117,18 @@ export default function RecentBVNList({
</button> </button>
) )
} }
})} })} */}
<button <button
onClick={handleNext} onClick={handleNext}
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
currentPage + numberOfSelection >= data.length currentPage + numberOfSelection >= data.length
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
&gt; Next &gt;
</button> </button>
</div> </div>
)} )}
@@ -89,17 +89,17 @@ export default function RecentLoanAppList({
<div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center"> <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
<button <button
onClick={handlePrev} onClick={handlePrev}
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
currentPage == 0 currentPage == 0
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
&lt; &lt; Previous
</button> </button>
{data.length && data.map((item, index)=>{ {/* {data.length && data.map((item, index)=>{
item = item item = item
if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){ if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
return ( return (
@@ -117,18 +117,18 @@ export default function RecentLoanAppList({
</button> </button>
) )
} }
})} })} */}
<button <button
onClick={handleNext} onClick={handleNext}
className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${ className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
currentPage + numberOfSelection >= data.length currentPage + numberOfSelection >= data.length
? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none" ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
: "text-slate-600 border-slate-600 dark:text-white dark:border-white" : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
}`} }`}
style={{width:'30px', height:'30px'}} // style={{width:'30px', height:'30px'}}
> >
&gt; Next &gt;
</button> </button>
</div> </div>
)} )}