From c59eeed7e0e09424f2c2b0b08d736c9301c6cc5e Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Thu, 25 Jan 2024 10:09:31 +0100
Subject: [PATCH] :sparkles: #24 - feat: add paginator component

---
 src/components/button/button.scss             |  38 ++-
 src/components/button/button.tsx              |   9 +-
 src/components/form/input/input.tsx           |   4 +-
 src/components/form/select/select.scss        |   4 +
 src/components/form/select/select.tsx         |  38 +--
 src/components/icon/icon.scss                 |  18 ++
 src/components/icon/icon.tsx                  |  33 ++-
 src/components/index.ts                       |   1 +
 src/components/paginator/index.ts             |   1 +
 src/components/paginator/paginator.scss       |   7 +
 .../paginator/paginator.stories.tsx           | 136 ++++++++++
 src/components/paginator/paginator.tsx        | 234 ++++++++++++++++++
 src/lib/i18n/formatMessage.ts                 |  22 ++
 src/settings/_style.scss                      |   2 +
 14 files changed, 521 insertions(+), 26 deletions(-)
 create mode 100644 src/components/paginator/index.ts
 create mode 100644 src/components/paginator/paginator.scss
 create mode 100644 src/components/paginator/paginator.stories.tsx
 create mode 100644 src/components/paginator/paginator.tsx
 create mode 100644 src/lib/i18n/formatMessage.ts

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 76350e5f..c3e89c3f 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -4,12 +4,16 @@
   --mykn-button-color-background: var(--theme-color-primary-800);
   --mykn-button-color-shadow: var(--theme-shade-1000);
   --mykn-button-color-text: var(--theme-shade-0);
+  --mykn-button-height: auto;
+  --mykn-button-width: auto;
   --mykn-button-offset: 0px;
+  --mykn-button-padding-v: var(--spacing-v-s);
+  --mykn-button-padding-h: var(--spacing-h-s);
 
   align-items: center;
   appearance: none;
   margin: 0;
-  padding: var(--spacing-v-s) var(--spacing-h-s);
+  padding: var(--mykn-button-padding-v) var(--mykn-button-padding-h);
   background-color: var(--mykn-button-color-background);
   border: 1px solid var(--mykn-button-color-border);
   border-radius: var(--border-radus-m);
@@ -21,6 +25,7 @@
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0.5em;
+  height: var(--mykn-button-height);
   font-family: Inter, sans-serif;
   font-size: var(--typography-font-size-body-s);
   justify-content: center;
@@ -30,6 +35,18 @@
   transition: all var(--animation-duration-fast)
     var(--animation-timing-function);
   transform: translateY(var(--mykn-button-offset));
+  width: var(--mykn-button-width);
+
+  &--square {
+    --mykn-button-height: calc(
+      var(--typography-line-height-body-s) + 2 * var(--spacing-v-s)
+    );
+    --mykn-button-width: calc(
+      var(--typography-line-height-body-s) + 2 * var(--spacing-v-s)
+    );
+    --mykn-button-padding-v: 0;
+    --mykn-button-padding-h: 0;
+  }
 
   &--variant-primary {
     &:focus,
@@ -45,6 +62,25 @@
     }
   }
 
+  &--variant-outline {
+    --mykn-button-color-background: transparent;
+    --mykn-button-color-border: var(--theme-shade-700);
+    --mykn-button-color-shadow: currentColor;
+    --mykn-button-color-text: var(--typography-color-body);
+
+    &:focus,
+    &:hover {
+      --mykn-button-color-background: var(--theme-color-primary-200);
+      --mykn-button-offset: -2px;
+    }
+
+    &[aria-expanded="true"],
+    &:active {
+      --mykn-button-color-background: var(--typography-color-background);
+      --mykn-button-offset: 0px;
+    }
+  }
+
   &--variant-transparent {
     --mykn-button-color-background: transparent;
     --mykn-button-color-shadow: currentColor;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index f5ad249f..fe53c65c 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -4,7 +4,8 @@ import React, { LegacyRef } from "react";
 import "./button.scss";
 
 type BaseButtonProps = {
-  variant?: "primary" | "transparent";
+  square?: boolean;
+  variant?: "primary" | "outline" | "transparent";
 };
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
@@ -20,11 +21,13 @@ export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
  * @constructor
  */
 export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
-  ({ variant = "primary", ...props }, ref) => {
+  ({ square = false, variant = "primary", ...props }, ref) => {
     return (
       <button
         ref={ref as LegacyRef<HTMLButtonElement>}
-        className={clsx("mykn-button", `mykn-button--variant-${variant}`)}
+        className={clsx("mykn-button", `mykn-button--variant-${variant}`, {
+          "mykn-button--square": square,
+        })}
         {...props}
       >
         {props.children}
diff --git a/src/components/form/input/input.tsx b/src/components/form/input/input.tsx
index 791cb7fb..a2ae981c 100644
--- a/src/components/form/input/input.tsx
+++ b/src/components/form/input/input.tsx
@@ -8,7 +8,7 @@ export type InputProps = Omit<
   "value"
 > & {
   /** Gets called when the value is changed */
-  onChange?: (event: Event) => void;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
 
   /** Input value. */
   value?: string | number;
@@ -54,7 +54,7 @@ export const Input: React.FC<InputProps> = ({
     const detail = type === "file" ? input.files : event.target.value;
     const changeEvent = eventFactory("change", detail, true, false, false);
     input.dispatchEvent(changeEvent);
-    onChange && onChange(changeEvent);
+    onChange && onChange(event);
   };
 
   return (
diff --git a/src/components/form/select/select.scss b/src/components/form/select/select.scss
index a1cf99ac..048b19ed 100644
--- a/src/components/form/select/select.scss
+++ b/src/components/form/select/select.scss
@@ -18,6 +18,10 @@
   max-width: 100%;
   position: relative;
 
+  &--size-fit-content {
+    width: fit-content;
+  }
+
   .mykn-icon {
     transition: transform var(--animation-duration-medium)
       var(--animation-timing-function);
diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx
index 3f771889..ede85af5 100644
--- a/src/components/form/select/select.tsx
+++ b/src/components/form/select/select.tsx
@@ -5,7 +5,7 @@ import {
   autoUpdate,
   flip,
   offset,
-  size,
+  size as sizeMiddleware,
   useClick,
   useDismiss,
   useFloating,
@@ -22,12 +22,15 @@ import { eventFactory } from "../eventFactory";
 import "./select.scss";
 
 export type SelectProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Input name. */
-  name: string;
-
   /** Can be used to generate `SelectOption` components from an array of objects. */
   options: Option[];
 
+  /** The clear value (accessible) label. */
+  labelClear?: string;
+
+  /** Input name. */
+  name?: string;
+
   /**
    * Gets called when the selected option is changed
    *
@@ -38,14 +41,14 @@ export type SelectProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   onChange?: (event: Event) => void;
 
-  /** The clear value (accessible) label. */
-  labelClear?: string;
+  /** Placeholder text. */
+  placeholder?: string;
 
   /** Whether a value is required, a required select can't be cleared. */
   required?: boolean;
 
-  /** Placeholder text. */
-  placeholder?: string;
+  /** Can be set to `fit-content` to apply auto sizing based on content width. */
+  size?: "fit-content";
 
   value?: Option["value"] | null;
 } & SelectRequiredConditional;
@@ -63,9 +66,12 @@ type SelectRequiredConditional =
 /**
  * A single (select) option, can be passed to `Select  as array.
  */
-export type Option = {
-  label: string;
-  value?: React.OptionHTMLAttributes<HTMLOptionElement>["value"];
+export type Option<
+  L = number | string,
+  V = React.OptionHTMLAttributes<HTMLOptionElement>["value"],
+> = {
+  label: L;
+  value?: V;
   selected?: React.OptionHTMLAttributes<HTMLOptionElement>["selected"]; // TODO
 };
 
@@ -84,6 +90,7 @@ export const Select: React.FC<SelectProps> = ({
   labelClear = "Clear value",
   placeholder = "",
   required = false,
+  size,
   value = null,
   ...props
 }) => {
@@ -100,7 +107,7 @@ export const Select: React.FC<SelectProps> = ({
     middleware: [
       offset(6),
       flip(),
-      size({
+      sizeMiddleware({
         padding: 20,
       }),
     ],
@@ -173,7 +180,8 @@ export const Select: React.FC<SelectProps> = ({
     <>
       <div
         className={clsx("mykn-select", {
-          "mykn-select__label--selected": selectedIndex,
+          "mykn-select--selected": selectedIndex,
+          [`mykn-select--size-${size}`]: size,
         })}
         tabIndex={0}
         ref={refs.setReference}
@@ -186,7 +194,7 @@ export const Select: React.FC<SelectProps> = ({
         <select
           ref={fakeInputRef}
           name={name}
-          value={selectedOptionValue}
+          defaultValue={selectedOptionValue}
           hidden={true}
         >
           {selectedOptionValue && (
@@ -269,7 +277,7 @@ const BaseSelectDropdown: React.FC<SelectDropdownProps> = ({
   setSelectedIndex,
 }) => {
   const listRef = React.useRef<Array<HTMLElement | null>>([]);
-  const listContentRef = React.useRef(options.map((o) => o.label));
+  const listContentRef = React.useRef(options.map((o) => String(o.label)));
   const isTypingRef = React.useRef(false);
 
   const click = useClick(context, { event: "mousedown" });
diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
index 87bf9681..86ee3c4c 100644
--- a/src/components/icon/icon.scss
+++ b/src/components/icon/icon.scss
@@ -2,4 +2,22 @@
   height: 1.2em;
   vertical-align: middle;
   width: 1.2em;
+
+  &--hidden {
+    visibility: hidden;
+  }
+
+  &--spin {
+    animation: spin var(--animation-duration-slow)
+      var(--animation-timing-function) infinite;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 8551e8e8..0031e960 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -1,10 +1,17 @@
 import * as outlineHeroIcons from "@heroicons/react/24/outline";
 import * as solidHeroIcons from "@heroicons/react/24/solid";
+import clsx from "clsx";
 import React from "react";
 
 import "./icon.scss";
 
-export type IconProps = React.SVGProps<SVGElement>;
+export type IconProps = React.SVGProps<SVGElement> & {
+  /** Whether the icon should be hidden (preserving space). */
+  hidden?: boolean;
+
+  /** Whether the icon should spin. */
+  spin?: boolean;
+};
 
 /**
  * Takes Object containing (Heroicons) React.FC components. Each component is
@@ -14,15 +21,31 @@ export type IconProps = React.SVGProps<SVGElement>;
 const mapIcons = (heroIcons: { [index: string]: React.FC }) =>
   Object.fromEntries(
     Object.entries(heroIcons).map(([name, Component]) => {
-      const Icon = ({ ...props }: IconProps) => (
-        <Component className="mykn-icon" {...(props as IconProps)} />
+      const Icon = ({ hidden, spin, ...props }: IconProps) => (
+        <Component
+          className={clsx("mykn-icon", {
+            "mykn-icon--hidden": hidden,
+            "mykn-icon--spin": spin,
+          })}
+          {...(props as IconProps)}
+        />
       );
 
       return [name, Icon];
     }),
   );
 
-const Outline = mapIcons(outlineHeroIcons);
-const Solid = mapIcons(solidHeroIcons);
+type OutlineType = {
+  [i in keyof typeof outlineHeroIcons]: React.FC<IconProps>;
+};
+type SolidType = {
+  [i in keyof typeof solidHeroIcons]: React.FC<IconProps>;
+};
+
+// @ts-expect-error - Hacky way of re-exporting types.
+const Outline: OutlineType = mapIcons(outlineHeroIcons);
+
+// @ts-expect-error - Hacky way of re-exporting types.
+const Solid: SolidType = mapIcons(solidHeroIcons);
 
 export { Outline, Solid };
diff --git a/src/components/index.ts b/src/components/index.ts
index 2a9661fc..9b339e97 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,5 +9,6 @@ export * from "./layout";
 export * from "./logo";
 export * from "./navbar";
 export * from "./page";
+export * from "./paginator";
 export * from "./toolbar";
 export * from "./typography";
diff --git a/src/components/paginator/index.ts b/src/components/paginator/index.ts
new file mode 100644
index 00000000..ba68168c
--- /dev/null
+++ b/src/components/paginator/index.ts
@@ -0,0 +1 @@
+export * from "./paginator";
diff --git a/src/components/paginator/paginator.scss b/src/components/paginator/paginator.scss
new file mode 100644
index 00000000..f2180457
--- /dev/null
+++ b/src/components/paginator/paginator.scss
@@ -0,0 +1,7 @@
+@use "../../settings/style";
+
+.mykn-paginator {
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-h-m);
+}
diff --git a/src/components/paginator/paginator.stories.tsx b/src/components/paginator/paginator.stories.tsx
new file mode 100644
index 00000000..182f758e
--- /dev/null
+++ b/src/components/paginator/paginator.stories.tsx
@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+
+import { Paginator } from "./paginator";
+
+const meta = {
+  title: "Data/Paginator",
+  component: Paginator,
+  argTypes: {
+    onPageChange: { action: "onPageChange" },
+    onPageSizeChange: { action: "onPageSizeChange" },
+  },
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Paginator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PaginatorComponent: Story = {
+  args: {
+    count: 123,
+    page: 3,
+    pageSize: 20,
+    pageSizeOptions: [
+      { label: 10 },
+      { label: 20 },
+      { label: 30 },
+      { label: 40 },
+      { label: 50 },
+    ],
+    labelCurrentPageRange: "{pageStart} - {pageEnd} of {pageCount}",
+    labelGoToPage: "Go to",
+    labelPageSize: "Show rows",
+    labelPrevious: "Go to previous page",
+    labelNext: "Go to next page",
+  },
+};
+
+export const PaginatorComponentWithSpinner: Story = {
+  args: {
+    count: 123,
+    page: 3,
+    pageSize: 20,
+    pageSizeOptions: [
+      { label: 10 },
+      { label: 20 },
+      { label: 30 },
+      { label: 40 },
+      { label: 50 },
+    ],
+    labelCurrentPageRange: "{pageStart} - {pageEnd} of {pageCount}",
+    labelGoToPage: "Go to",
+    labelLoading: "Loading",
+    labelPageSize: "Show rows",
+    labelPrevious: "Go to previous page",
+    labelNext: "Go to next page",
+    onPageChange: () => new Promise((resolve) => setTimeout(resolve, 1000)),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const pageInput = canvas.getByRole("spinbutton");
+    const previousButton = canvas.getByLabelText("Go to previous page");
+    const nextButton = canvas.getByLabelText("Go to next page");
+    canvas.getByText("Show rows");
+    canvas.getByText("Go to");
+
+    // Click page size select.
+    const pageSizeSelect = canvas.getByRole("combobox");
+    userEvent.click(pageSizeSelect, { delay: 10 });
+
+    // Select "10".
+    const pageSize10Option = await canvas.findByText("10");
+    userEvent.click(pageSize10Option, { delay: 10 });
+
+    // Wait for...
+    await waitFor(
+      async () => {
+        // ...page input to be reset to 1.
+        await expect(pageInput).toHaveValue(1);
+
+        // ...spinner to become visible.
+        await expect(canvas.getByLabelText("Loading")).toBeVisible();
+      },
+      {
+        timeout: 400,
+      },
+    );
+
+    // Wait for...
+    await waitFor(
+      async () =>
+        //...spinner to become invisible again.
+        await expect(canvas.queryByLabelText("Loading")).toBeFalsy(),
+      { timeout: 1000 },
+    );
+
+    // Type to "2" in pageInput.
+    await userEvent.click(pageInput, { delay: 10 });
+    await userEvent.clear(pageInput);
+    await userEvent.type(pageInput, "2");
+
+    // Click previous page.
+    await userEvent.click(previousButton);
+    await expect(pageInput).toHaveValue(1);
+
+    // Click previous page again.
+    await userEvent.click(previousButton);
+    await expect(pageInput).toHaveValue(1);
+
+    // Click next page.
+    await userEvent.click(nextButton);
+    await expect(pageInput).toHaveValue(2);
+    await canvas.findByText("11 - 20 of 13");
+
+    // Click next page until 13.
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await expect(pageInput).toHaveValue(13);
+
+    // Click next page again.
+    await userEvent.click(nextButton);
+    await expect(pageInput).toHaveValue(13);
+    await canvas.findByText("121 - 123 of 13");
+  },
+};
diff --git a/src/components/paginator/paginator.tsx b/src/components/paginator/paginator.tsx
new file mode 100644
index 00000000..e376e8b8
--- /dev/null
+++ b/src/components/paginator/paginator.tsx
@@ -0,0 +1,234 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { formatMessage } from "../../lib/i18n/formatMessage";
+import { Button } from "../button";
+import { Input, Option, Select, SelectProps } from "../form";
+import { Outline } from "../icon";
+import { P } from "../typography";
+import "./paginator.scss";
+
+export type PaginatorProps = {
+  /** The total number of results (items not pages). */
+  count: number;
+
+  /** The current page. */
+  page: number;
+
+  /** The page size (items per page), required even if `pageSizeOptions` is not set. */
+  pageSize: number;
+
+  /** The current page range (accessible) label. */
+  labelCurrentPageRange: string;
+
+  /** The go to page (accessible) label. */
+  labelGoToPage: string;
+
+  /** The page size (accessible) label. */
+  labelPageSize: string;
+
+  /** The go to previous page (accessible) label. */
+  labelPrevious: string;
+
+  /** The go to next page (accessible) label. */
+  labelNext: string;
+
+  /** The options for the page size, can be omitted if no variable pages size is supported. */
+  pageSizeOptions?: Option<number, number>[];
+
+  /**
+   * The loading (accessible) label,
+   * @see onPageChange
+   */
+  labelLoading?: string;
+
+  /**
+   * Gets called when the selected page is changed
+   *
+   * If a `Promise` is returned and `labelLoading` is set: a spinner will be
+   * shown after during the "pending" state of the returned `Promise`.
+   *
+   * This callback is debounced every 300 milliseconds.
+   */
+  onPageChange?: (page: number) => Promise<unknown> | void;
+
+  /** Gets called when the selected page size is changed. */
+  onPageSizeChange?: (pageSize: number) => Promise<unknown> | void;
+};
+
+/**
+ * Paginator component, can be used to show and manipulate information about the
+ * current page and pages in a set of data.
+ *
+ * The `onPageChange` callback is debounced and provided a mechanism for a
+ * spinner to appear during load (see docs).
+ *
+ * All labels that are passed to this component may contain the following
+ * placeholders:
+ *
+ * - {count}
+ * - {index}
+ * - {page}
+ * - {pageCount}
+ * - {pageStart}
+ * - {pageEnd}
+ * - {pageSize}
+ *
+ * @param children
+ * @param props
+ * @constructor
+ */
+export const Paginator: React.FC<PaginatorProps> = ({
+  count,
+  labelCurrentPageRange = "{pageStart} - {pageEnd} of {pageCount}",
+  labelGoToPage = "Go to",
+  labelPageSize = "Show rows",
+  labelPrevious = "Go to previous page",
+  labelNext = "Go to next page",
+  labelLoading,
+  page = 1,
+  pageSize,
+  pageSizeOptions = [],
+  onPageChange,
+  onPageSizeChange,
+  ...props
+}) => {
+  const onPageChangeTimeoutRef = useRef<NodeJS.Timeout>();
+  const [loadingState, setLoadingState] = useState(false);
+  const [pageState, setPageState] = useState(page);
+  const [pageSizeState, setPageSizeState] = useState(pageSize);
+
+  const index = pageState - 1;
+  const pageCount = Math.ceil(count / pageSizeState);
+  const pageStart = index * pageSizeState + 1;
+  const pageEnd = Math.min(pageStart + pageSizeState - 1, count);
+
+  const context = {
+    count,
+    index,
+    page: pageState,
+    pageCount,
+    pageStart,
+    pageEnd,
+    pageSize: pageSizeState,
+  };
+
+  useEffect(() => setPageState(page), [page]);
+  useEffect(() => setPageSizeState(pageSize), [pageSize]);
+
+  /**
+   * Denounces onPageChange callback.
+   */
+  useEffect(() => {
+    const handler = () => {
+      if (!onPageChange) {
+        return;
+      }
+      const result = onPageChange(pageState);
+      if (result) {
+        setLoadingState(true);
+      }
+      Promise.resolve(result).finally(() => setLoadingState(false));
+    };
+
+    onPageChangeTimeoutRef.current &&
+      clearTimeout(onPageChangeTimeoutRef.current);
+
+    onPageChangeTimeoutRef.current = setTimeout(handler, 300);
+
+    return () => clearTimeout(onPageChangeTimeoutRef.current);
+  }, [pageState]);
+
+  /**
+   * Gets called when the page size dropdown is changed.
+   * @param event
+   */
+  const handlePageSizeChange: SelectProps["onChange"] = (event) => {
+    const target = event.target as HTMLSelectElement;
+    const value = parseInt(target.value);
+    setPageSizeState(value);
+    setPageState(1);
+    onPageSizeChange && onPageSizeChange(value);
+  };
+
+  /**
+   * Gets called when the page input is changed.
+   * @param event
+   */
+  const handlePageChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    const value = parseInt(event.target.value);
+    const sanitizedValue = Math.max(Math.min(value, pageCount), 1);
+    setPageState(sanitizedValue);
+  };
+
+  /**
+   * Gets called when the previous button is changed.
+   */
+  const handlePrevious: React.MouseEventHandler<HTMLButtonElement> = () => {
+    const sanitizedValue = Math.max(pageState - 1, 1);
+    setPageState(sanitizedValue);
+  };
+
+  /**
+   * Gets called when the page input is changed.
+   */
+  const handleNext: React.MouseEventHandler<HTMLButtonElement> = () => {
+    const sanitizedValue = Math.min(pageState + 1, pageCount);
+    setPageState(sanitizedValue);
+  };
+
+  return (
+    <nav className="mykn-paginator" {...props}>
+      {pageSizeOptions.length > 0 && (
+        <>
+          <P>{formatMessage(labelPageSize, context)}</P>
+          <Select
+            options={pageSizeOptions}
+            required={true}
+            size="fit-content"
+            value={pageSizeState}
+            onChange={handlePageSizeChange}
+          />
+        </>
+      )}
+
+      <P>{formatMessage(labelGoToPage, context)}</P>
+      <Input
+        min={1}
+        max={pageCount}
+        size={String(pageCount).length}
+        type="number"
+        value={pageState}
+        onChange={handlePageChange}
+      ></Input>
+
+      <P>{formatMessage(labelCurrentPageRange, context)}</P>
+      <Button
+        square
+        variant="outline"
+        aria-label={labelPrevious}
+        onClick={handlePrevious}
+      >
+        <Outline.ChevronLeftIcon />
+      </Button>
+      <Button
+        square
+        variant="outline"
+        aria-label={labelNext}
+        onClick={handleNext}
+      >
+        <Outline.ChevronRightIcon />
+      </Button>
+
+      {labelLoading && (
+        <Outline.ArrowPathIcon
+          spin={true}
+          aria-hidden={!loadingState}
+          aria-label={loadingState ? labelLoading : ""}
+          hidden={!loadingState}
+        />
+      )}
+    </nav>
+  );
+};
diff --git a/src/lib/i18n/formatMessage.ts b/src/lib/i18n/formatMessage.ts
new file mode 100644
index 00000000..05f2ab35
--- /dev/null
+++ b/src/lib/i18n/formatMessage.ts
@@ -0,0 +1,22 @@
+/**
+ * Replaces placeholders in the given template with corresponding values from the context.
+ * TODO: Decide on future implementation.
+ *
+ * @param template - The input template containing placeholders in the format {key}.
+ * @param context - An object with key-value pairs to replace the placeholders in the template.
+ * @returns {string} - The formatted string with replaced placeholders.
+ *
+ * @example
+ * const template = "Hello, {name}! Your score is {score}.";
+ * const context = { name: "John", score: 85 };
+ * const formattedMessage = formatMessage(template, context);
+ * // Result: "Hello, John! Your score is 85."
+ */
+export const formatMessage = (
+  template: string,
+  context: Record<string, number | string>,
+): string => {
+  return Object.entries(context).reduce((acc, [key, value]) => {
+    return acc.replace(`{${key}}`, String(value));
+  }, template);
+};
diff --git a/src/settings/_style.scss b/src/settings/_style.scss
index c93aefbf..1cbe3c95 100644
--- a/src/settings/_style.scss
+++ b/src/settings/_style.scss
@@ -4,6 +4,7 @@
   --animation-timing-function: ease-in-out;
   --animation-duration-fast: 0.1s;
   --animation-duration-medium: 0.3s;
+  --animation-duration-slow: 1s;
 
   /// THEME
   --theme-color-primary-800: #341a90;
@@ -43,6 +44,7 @@
   --spacing-h-s: 12px;
   --spacing-v-s: 6px;
 
+  --spacing-h-m: 8px;
   --spacing-v-m: 8px;
 
   --spacing-h-xl: 20px;