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,28 +45,74 @@ 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}>
-            <MantinePagination
-                boundaries={1}
-                classNames={{
-                    control: styles.control,
-                    root: styles.root,
-                    ...classNames,
-                }}
-                nextIcon={() => <Icon icon="arrowRightS" />}
-                previousIcon={() => <Icon icon="arrowLeftS" />}
-                radius="md"
-                ref={paginationRef}
-                siblings={containerQuery.isXl ? 3 : containerQuery.isMd ? 2 : 1}
-                size="md"
-                style={{
-                    ...style,
-                }}
-                {...props}
-                onChange={handleChange}
-                value={currentPageValue}
-            />
+            <Group gap="xs">
+                <MantinePagination
+                    boundaries={1}
+                    classNames={{
+                        control: styles.control,
+                        root: styles.root,
+                        ...classNames,
+                    }}
+                    nextIcon={() => <Icon icon="arrowRightS" />}
+                    previousIcon={() => <Icon icon="arrowLeftS" />}
+                    radius="md"
+                    ref={paginationRef}
+                    siblings={containerQuery.isXl ? 3 : containerQuery.isMd ? 2 : 1}
+                    size="md"
+                    style={{
+                        ...style,
+                    }}
+                    {...props}
+                    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}