1 files changed, 101 insertions, 0 deletions
diff --git a/apps/web-shared/src/components/table/paginator.svelte b/apps/web-shared/src/components/table/paginator.svelte
new file mode 100644
index 0000000..53c6392
--- /dev/null
+++ b/apps/web-shared/src/components/table/paginator.svelte
@@ -0,0 +1,101 @@
+<script>
+	import {createEventDispatcher, onMount} from "svelte";
+	import {restrict_input_to_numbers} from "$shared/lib/helpers";
+
+	const dispatch = createEventDispatcher();
+	export let page = 1;
+	export let pageCount = 1;
+	let prevCount = page;
+	let canIncrement = false;
+	let canDecrement = false;
+	$: canIncrement = page < pageCount;
+	$: canDecrement = page > 1;
+
+	onMount(() => {
+		restrict_input_to_numbers(document.querySelector("#curr-page"));
+	});
+
+	function increment() {
+		if (canIncrement) {
+			page++;
+		}
+	}
+
+	function decrement() {
+		if (canDecrement) {
+			page--;
+		}
+	}
+
+	$: if (page) {
+		handle_change();
+	}
+
+	function handle_change() {
+		if (page === prevCount) {
+			return;
+		}
+		prevCount = page;
+		if (page > pageCount) {
+			page = pageCount;
+		}
+		dispatch("value_change", {
+			newValue: page,
+		});
+	}
+</script>
+
+<nav class="pagination"
+     aria-label="Pagination">
+    <ul class="pagination__list flex flex-wrap gap-xxxs justify-center justify-end@md">
+        <li>
+            <button on:click={decrement}
+                    class="reset pagination__item {canDecrement ? '' : 'c-disabled'}">
+                <svg class="icon icon--xs flip-x"
+                     viewBox="0 0 16 16"
+                ><title>Go to previous page</title>
+                    <polyline
+                            points="6 2 12 8 6 14"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                    />
+                </svg>
+            </button>
+        </li>
+
+        <li>
+            <span class="pagination__jumper flex items-center">
+                <input
+                        aria-label="Page number"
+                        class="form-control"
+                        id="curr-page"
+                        type="text"
+                        on:change={handle_change}
+                        value={page}
+                />
+                <em>of {pageCount}</em>
+            </span>
+        </li>
+
+        <li>
+            <button on:click={increment}
+                    class="reset pagination__item {canIncrement ? '' : 'c-disabled'}">
+                <svg class="icon icon--xs"
+                     viewBox="0 0 16 16"
+                ><title>Go to next page</title>
+                    <polyline
+                            points="6 2 12 8 6 14"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                    />
+                </svg>
+            </button>
+        </li>
+    </ul>
+</nav>