feat: add Pagination and PaginationNumber components with styles and integration into index page

src/components/pagination/pagination.astro

@@ -0,0 +1,36 @@
+---
+export interface Props {
+  defaultPage?: number;
+}
+
+const { defaultPage = 1 } = Astro.props;
+---
+
+<div class="pagination" data-current={defaultPage}>
+  <slot/>
+</div>
+
+<script>
+  const pagination = document.querySelector('.pagination');
+  const numbers = pagination?.querySelectorAll('.pagination-number');
+
+  numbers?.forEach((el) => {
+    if (
+      !el.classList.contains('pagination-number__disabled') &&
+      el.textContent?.trim() === pagination?.getAttribute('data-current')
+    ) {
+      el.classList.add('pagination-number__selected');
+    }
+
+    el.addEventListener('click', () => {
+      if (el.classList.contains('pagination-number__disabled')) return;
+      numbers.forEach(n => n.classList.remove('pagination-number__selected'));
+      el.classList.add('pagination-number__selected');
+      pagination?.setAttribute('data-current', el.textContent?.trim() ?? '');
+    });
+  });
+</script>
+
+<style lang="scss">
+@use './pagination';
+</style>