add selecting of how many items are visible per page

src/static/tailwind.css

@@ -662,9 +662,6 @@
   .grid-cols-\[repeat\(auto-fill\,minmax\(25\%\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(25%,1fr));
   }
-  .grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
-    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
-  }
   .grid-cols-\[repeat\(auto-fill\,minmax\(25vw\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(25vw,1fr));
   }
@@ -683,12 +680,18 @@
   .grid-cols-\[repeat\(auto-fill\,minmax\(50vw\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(50vw,1fr));
   }
+  .grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
   .items-center {
     align-items: center;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -698,6 +701,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -736,6 +742,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -752,16 +761,27 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .text-\[\#140606\] {
     color: #140606;
   }
   .text-\[\#f9ebeb\] {
     color: #f9ebeb;
   }
+  .text-orange-500 {
+    color: var(--color-orange-500);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -830,6 +850,17 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:text-lg {
+    @media (width >= 48rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
   .lg\:text-xl {
     @media (width >= 64rem) {
       font-size: var(--text-xl);
@@ -946,6 +977,10 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;

src/static/utils.js

@@ -40,16 +40,16 @@ function setImagesPerPage(count) {
   localStorage.setItem("ImagesPP", count);
 }
 function getImagesPerPage() {
-  const count = localStorage.getItem("ImagesPP");
+  let count = localStorage.getItem("ImagesPP");
   const url = new URL(window.location.toString());
   const countParam = url.searchParams.get("ImagesPP");
 
   if (!count && !countParam) {
     setImagesPerPage(24);
     url.searchParams.set("ImagesPP", 24);
-    return Number(24);
+    count = Number(24);
   } else if (countParam) {
-    return Number(countParam);
+    count = Number(countParam);
   } else if (count) {
     url.searchParams.set("ImagesPP", count);
     window.history.pushState(
@@ -57,10 +57,20 @@ function getImagesPerPage() {
       `Wah-Collection/Images`,
       `?${url.searchParams.toString()}`
     );
-    return Number(count);
+    count = Number(count);
   } else {
-    return 24;
+    count = 24;
   }
+
+  const active = document.querySelectorAll(`[data-ipp="${count}"]`);
+  if (active.length > 0) {
+    active.forEach((item) => {
+      item.classList.add("underline");
+      item.classList.add("text-orange-500");
+      item.classList.add("font-bold");
+    });
+  }
+  return count;
 }
 
 function setOffset(offset) {
@@ -79,23 +89,32 @@ function getOffset() {
 }
 
 function enableNav() {
-
   function handleClickPrev() {
-    setOffset(getOffset() - getImagesPerPage())
+    setOffset(getOffset() - getImagesPerPage());
   }
 
   function handleClickNext() {
-    setOffset(getOffset() + getImagesPerPage())
+    setOffset(getOffset() + getImagesPerPage());
   }
 
-  const nav_prev = document.querySelectorAll("#nav_prev")
+  function handleClickIpp(ipp) {
-  const nav_next = document.querySelectorAll("#nav_next")
+    setImagesPerPage(ipp);
+    const url = new URL(window.location.toString());
+    url.searchParams.set("ImagesPP", ipp);
+    window.location.href = url.href;
+  }
+
+  const nav_prev = document.querySelectorAll("#nav_prev");
+  const nav_next = document.querySelectorAll("#nav_next");
+  const nav_ipp = document.querySelectorAll("#nav_ipp");
 
   nav_prev.forEach((item) => {
-    item.addEventListener('click', handleClickPrev)
+    item.addEventListener("click", handleClickPrev);
-  })
+  });
   nav_next.forEach((item) => {
-    item.addEventListener('click', handleClickNext)
+    item.addEventListener("click", handleClickNext);
-  })
+  });
-
+  nav_ipp.forEach((item) => {
-}
+    item.addEventListener("click", () => handleClickIpp(item.dataset.ipp));
+  });
+}

src/templates/Components/PageNavigation.tsx

@@ -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">
+    <div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
-      <button className="flex justify-center gap-4 items-center cursor-pointer" id="nav_prev">
+      <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>