add go to page selector for list pagination

src/shared/components/pagination/pagination.tsx

@@ -3,11 +3,15 @@ import {
     PaginationProps as MantinePaginationProps,
 } from '@mantine/core';
 import clsx from 'clsx';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import styles from './pagination.module.css';
 
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
+import { NumberInput } from '/@/shared/components/number-input/number-input';
+import { Popover } from '/@/shared/components/popover/popover';
 import { Separator } from '/@/shared/components/separator/separator';
 import { Text } from '/@/shared/components/text/text';
 import { useContainerQuery } from '/@/shared/hooks/use-container-query';
@@ -41,8 +45,21 @@ export const Pagination = ({
     const currentPageStartIndex = itemsPerPage * currentPageIndex + 1;
     const currentPageEndIndex = Math.min(currentPageValue * itemsPerPage, totalItemCount);
 
+    const [goToPage, setGoToPage] = useState(currentPageValue);
+
+    const handleGoToPage = () => {
+        handleChange(Math.max(1, Math.min(goToPage, props.total)));
+    };
+
+    const handleGoToKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            handleGoToPage();
+        }
+    };
+
     return (
         <div className={clsx(styles.container, containerClassName)} ref={containerRef}>
+            <Group gap="xs">
                 <MantinePagination
                     boundaries={1}
                     classNames={{
@@ -63,6 +80,39 @@ export const Pagination = ({
                     onChange={handleChange}
                     value={currentPageValue}
                 />
+                <Popover position="top">
+                    <Popover.Target>
+                        <ActionIcon
+                            className={styles.control}
+                            icon="ellipsisHorizontal"
+                            size="xs"
+                            style={{
+                                height: 'calc(2rem * 1)',
+                                minWidth: 'calc(2rem * 1)',
+                            }}
+                        />
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                        <Group gap={0}>
+                            <NumberInput
+                                autoFocus
+                                hideControls={false}
+                                max={props.total}
+                                min={1}
+                                onChange={(e) => setGoToPage(Number(e))}
+                                onKeyDown={handleGoToKeyDown}
+                                value={currentPageValue}
+                                width={120}
+                            />
+                            <ActionIcon
+                                icon="arrowRight"
+                                onClick={handleGoToPage}
+                                variant="default"
+                            />
+                        </Group>
+                    </Popover.Dropdown>
+                </Popover>
+            </Group>
             {containerQuery.isSm && totalItemCount && (
                 <Text isNoSelect weight={500}>
                     {currentPageStartIndex} - {currentPageEndIndex} <Separator /> {totalItemCount}