feat: select page web component

src/assets/scripts/paginator.js

@@ -1,25 +0,0 @@
-window.onload = () => {
-  const pagination = document.getElementById('pagination')
-  const uri = window.location.pathname
-  const urlSegments = uri.split('/').filter(segment => segment !== '')
-  let pageNumber = parseInt(urlSegments[urlSegments.length - 1]) || 0
-  pagination.querySelector(`option[value="${pageNumber.toString()}"]`).setAttribute('selected', 'selected')
-
-  if (pagination) {
-    pagination.addEventListener('change', (event) => {
-      pageNumber = event.target.value
-
-      if (urlSegments.length === 0 || isNaN(urlSegments[urlSegments.length - 1])) {
-        urlSegments.push(pageNumber.toString())
-      } else {
-        urlSegments[urlSegments.length - 1] = pageNumber.toString()
-      }
-
-      if (pageNumber === 0) {
-        window.location.href = `${window.location.protocol}//${window.location.host}/`
-      } else {
-        window.location = `${window.location.protocol}//${window.location.host}/${urlSegments.join('/')}`
-      }
-    })
-  }
-}

src/assets/styles/index.css

@@ -413,7 +413,8 @@ select {
   line-height: var(--line-height-base);
 }
 
-.select {
+.select,
+select-pagination {
   border-radius: var(--rounded-full);
   background-color: var(--accent-color);
   padding: 0 var(--sizing-lg);
@@ -426,17 +427,22 @@ select {
 }
 
 .select,
-.select select {
+.select select,
+select-pagination,
+select-pagination select {
   min-height: calc(var(--sizing-3xl) * 1.25);
   min-width:  calc(var(--sizing-3xl) * 4);;
 }
 
 .select select,
-.select::after {
+.select::after,
+select-pagination select,
+select-pagination::after {
   grid-area: select;
 }
 
-.select::after {
+.select::after,
+select-pagination::after {
   content: '';
   width: var(--sizing-md);
   height: var(--sizing-sm);