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

src/components/index.ts

@@ -1,5 +1,3 @@
-// Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
-
 export * from './Icons/index.ts';
 export { default as Notification } from './Notifications/notification.astro';
 export { default as Toggle }       from './Toggle/toggle.astro';
@@ -16,4 +14,6 @@ export { default as NumericStepper } from './numericStepper/numericStepper.astro
 export { default as Avatar } from './Avatar/avatar.astro';
 export { default as Select } from './Select/select.astro';
 export { default as SelectOption } from './Select/selectOption.astro';
-export { default as TextField } from './textField/textField.astro';
+export { default as TextField } from './textField/textField.astro';
+export { default as Pagination } from './pagination/pagination.astro';
+export { default as PaginationNumber } from './pagination/paginationNumber.astro';

src/components/pagination/_pagination.scss

@@ -0,0 +1,6 @@
+@use '../../styles/tokens/typography' as *;
+
+.pagination {
+    display: flex;
+    gap: var(--nds-spacing-sm);
+}

src/components/pagination/_paginationNumber.scss

@@ -0,0 +1,26 @@
+@use '../../styles/tokens/typography' as *;
+
+.pagination-number {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--nds-radius-full);
+  &:hover:not(.pagination-number__disabled):not(.pagination-number__selected) {
+    background-color: var(--nds-secondary);
+    cursor: pointer;
+  }
+  &:active:not(.pagination-number__disabled):not(.pagination-number__selected) {
+    background-color: var(--nds-accent);
+    cursor: pointer;
+  }
+  &__disabled {
+    background-color: var(--nds-disabled);
+    cursor: not-allowed;
+  }
+  &__selected {
+    background-color: var(--nds-primary);
+    cursor: pointer;
+  }
+}

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>

src/components/pagination/paginationNumber.astro

@@ -0,0 +1,20 @@
+---
+export interface Props {
+  disabled?: boolean;
+}
+
+const { disabled } = Astro.props;
+
+const classes = [
+  'pagination-number',
+  disabled ? 'pagination-number__disabled' : ''
+].filter(Boolean).join(' ');
+---
+
+<div class={classes}>
+  <slot/>
+</div>
+
+<style lang="scss">
+@use './paginationNumber';
+</style>