add selecting of how many items are visible per page

This commit is contained in:
Kentai Radiquum 2025-02-01 01:22:51 +05:00
parent 5e30c48bac
commit a30c9bb445
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 88 additions and 22 deletions

View file

@ -1,10 +1,22 @@
export default function PageNav() {
const ipp = [12,24,32,48,72,100,250,500,1000]
return (
<div className="bg-orange-800/50 rounded-sm py-2 text-white flex justify-between gap-4 items-center">
<button className="flex justify-center gap-4 items-center cursor-pointer" id="nav_prev">
<div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
<button className="flex justify-center items-center cursor-pointer" id="nav_prev">
<div className="material-symbols--navigate-before w-16 h-16"></div>
</button>
<button className="flex justify-center gap-4 items-center cursor-pointer" id="nav_next">
<div className="flex gap-4">
{ipp.map((item, idx) => {
return <button key={`ipp_${item}`}
className={`${idx > 4 ? "hidden md:block" : ""} cursor-pointer md:text-lg lg:text-xl`}
id="nav_ipp"
data-ipp={item}
>{item}</button>
})}
</div>
<button className="flex justify-center items-center cursor-pointer" id="nav_next">
<div className="material-symbols--navigate-next w-16 h-16"></div>
</button>
</div>