From 4871c22ff1c3dc0872c946db089272e04b002aab Mon Sep 17 00:00:00 2001
From: Jebbaited <kostadrapak@gmail.com>
Date: Wed, 15 May 2024 17:38:06 +0300
Subject: [PATCH 1/2] feature: add the ability to go to the specific page in
 pagination

---
 components/ui/pagination.tsx | 62 ++++++++++++++++++++++++++++++------
 1 file changed, 53 insertions(+), 9 deletions(-)

diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index d5239fd5..1f3c785e 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,12 +1,14 @@
 'use client';
 
 import clsx from 'clsx';
+import { ChangeEvent, useEffect, useState } from 'react';
 import AntDesignArrowLeftOutlined from '~icons/ant-design/arrow-left-outlined';
 import AntDesignArrowRightOutlined from '~icons/ant-design/arrow-right-outlined';
 
 import { range } from '@antfu/utils';
 
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { cn } from '@/utils/utils';
 
 interface Props {
@@ -16,6 +18,8 @@ interface Props {
 }
 
 const Component = ({ page, pages, setPage }: Props) => {
+    const [pageToMove, setPageToMove] = useState<string>('');
+
     const generatePaginationArr = () => {
         const pagArr: (number | undefined)[] = [1];
 
@@ -44,9 +48,25 @@ const Component = ({ page, pages, setPage }: Props) => {
         }
 
         pagArr.push(...range(2, pages + 1));
+
         return pagArr;
     };
 
+    const handleMoveToPage = (event: ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        const digitsOnlyRegex = /^(?!0)\d+$/;
+
+        if (!digitsOnlyRegex.test(value)) return setPageToMove('');
+
+        if (parseInt(value) > pages) return;
+
+        setPageToMove(value);
+    };
+
+    useEffect(() => {
+        setPageToMove('');
+    }, [page]);
+
     return (
         <div className="flex w-full justify-center gap-2 lg:gap-4">
             <Button
@@ -59,17 +79,41 @@ const Component = ({ page, pages, setPage }: Props) => {
                 <AntDesignArrowLeftOutlined />
             </Button>
             {generatePaginationArr().map((v, index) => {
+                if (v) {
+                    return (
+                        <Button
+                            size="icon-md"
+                            variant={page === v ? 'default' : 'outline'}
+                            disabled={!v}
+                            onClick={() => v && setPage(v)}
+                            key={index}
+                            className={cn('size-9 sm:size-10')}
+                        >
+                            {v}
+                        </Button>
+                    );
+                }
+
                 return (
-                    <Button
-                        size="icon-md"
-                        variant={page === v ? 'default' : 'outline'}
-                        disabled={!v}
-                        onClick={() => v && setPage(v)}
+                    <Input
                         key={index}
-                        className={cn('size-9 sm:size-10', !v && 'w-auto')}
-                    >
-                        {v ? v : '...'}
-                    </Button>
+                        value={pageToMove}
+                        placeholder="..."
+                        onChange={handleMoveToPage}
+                        onKeyDown={(e) => {
+                            if (!pageToMove) return;
+
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                setPage(parseInt(pageToMove));
+                                setPageToMove('');
+                            }
+                        }}
+                        className={cn(
+                            'size-9 sm:size-10',
+                            pageToMove && 'focus-visible:none  w-16 sm:w-16',
+                        )}
+                    />
                 );
             })}
             <Button

From 7db740aac0ddf1c6029e2a27c56a9d1116234740 Mon Sep 17 00:00:00 2001
From: olexh <typicaladmsky@gmail.com>
Date: Wed, 15 May 2024 19:18:51 +0300
Subject: [PATCH 2/2] refactor: separate pagination button and input, add
 pagination item type

---
 components/ui/pagination.tsx | 163 +++++++++++++++++++++++------------
 1 file changed, 109 insertions(+), 54 deletions(-)

diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
index 1f3c785e..20163d03 100644
--- a/components/ui/pagination.tsx
+++ b/components/ui/pagination.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import clsx from 'clsx';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, FC, useEffect, useState } from 'react';
 import AntDesignArrowLeftOutlined from '~icons/ant-design/arrow-left-outlined';
 import AntDesignArrowRightOutlined from '~icons/ant-design/arrow-right-outlined';
 
@@ -17,15 +16,99 @@ interface Props {
     setPage: (page: number) => void;
 }
 
-const Component = ({ page, pages, setPage }: Props) => {
+type PaginationType = number | 'empty' | 'input';
+
+const PaginationEmpty: FC = () => {
+    return (
+        <Button
+            size="icon-md"
+            variant="outline"
+            disabled
+            className={cn('size-9 sm:size-10')}
+        >
+            ...
+        </Button>
+    );
+};
+
+interface PaginationButtonProps {
+    value: number;
+    page: number;
+    setPage: (page: number) => void;
+}
+
+const PaginationButton: FC<PaginationButtonProps> = ({
+    value,
+    page,
+    setPage,
+}) => {
+    return (
+        <Button
+            size="icon-md"
+            variant={value === page ? 'default' : 'outline'}
+            disabled={!value}
+            onClick={() => value && setPage(value)}
+            className={cn('size-9 sm:size-10')}
+        >
+            {value}
+        </Button>
+    );
+};
+
+interface PaginationInputProps {
+    pages: number;
+    page: number;
+    setPage: (page: number) => void;
+}
+
+const PaginationInput: FC<PaginationInputProps> = ({
+    page,
+    setPage,
+    pages,
+}) => {
     const [pageToMove, setPageToMove] = useState<string>('');
 
+    const handleMoveToPage = (event: ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        const digitsOnlyRegex = /^(?!0)\d+$/;
+
+        if (!digitsOnlyRegex.test(value)) return setPageToMove('');
+
+        if (parseInt(value) > pages) return;
+
+        setPageToMove(value);
+    };
+
+    useEffect(() => {
+        setPageToMove('');
+    }, [page]);
+
+    return (
+        <Input
+            value={pageToMove}
+            placeholder="..."
+            onChange={handleMoveToPage}
+            onKeyDown={(e) => {
+                if (!pageToMove) return;
+
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    setPage(parseInt(pageToMove));
+                    setPageToMove('');
+                }
+            }}
+            className={cn('size-9 sm:size-10', pageToMove && ' w-16 sm:w-16')}
+        />
+    );
+};
+
+const Pagination = ({ page, pages, setPage }: Props) => {
     const generatePaginationArr = () => {
-        const pagArr: (number | undefined)[] = [1];
+        const pagArr: PaginationType[] = [1];
 
         if (pages >= 7) {
             if (pages - page <= 3) {
-                pagArr.push(undefined);
+                pagArr.push('input');
                 pagArr.push(...range(pages - 4, pages + 1));
 
                 return pagArr;
@@ -33,15 +116,15 @@ const Component = ({ page, pages, setPage }: Props) => {
 
             if (page < 5) {
                 pagArr.push(...range(2, 6));
-                pagArr.push(undefined);
+                pagArr.push('input');
                 pagArr.push(pages);
 
                 return pagArr;
             }
 
-            pagArr.push(undefined);
+            pagArr.push('empty');
             pagArr.push(...range(page - 1, page + 2));
-            pagArr.push(undefined);
+            pagArr.push('input');
             pagArr.push(pages);
 
             return pagArr;
@@ -52,21 +135,6 @@ const Component = ({ page, pages, setPage }: Props) => {
         return pagArr;
     };
 
-    const handleMoveToPage = (event: ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value;
-        const digitsOnlyRegex = /^(?!0)\d+$/;
-
-        if (!digitsOnlyRegex.test(value)) return setPageToMove('');
-
-        if (parseInt(value) > pages) return;
-
-        setPageToMove(value);
-    };
-
-    useEffect(() => {
-        setPageToMove('');
-    }, [page]);
-
     return (
         <div className="flex w-full justify-center gap-2 lg:gap-4">
             <Button
@@ -74,45 +142,32 @@ const Component = ({ page, pages, setPage }: Props) => {
                 variant="outline"
                 onClick={() => setPage(page - 1)}
                 disabled={page === 1}
-                className={clsx('text-xs h-9 w-9 sm:h-10 sm:w-10')}
+                className={cn('size-9 text-xs sm:size-10')}
             >
                 <AntDesignArrowLeftOutlined />
             </Button>
-            {generatePaginationArr().map((v, index) => {
-                if (v) {
+            {generatePaginationArr().map((value, index) => {
+                if (typeof value === 'number') {
                     return (
-                        <Button
-                            size="icon-md"
-                            variant={page === v ? 'default' : 'outline'}
-                            disabled={!v}
-                            onClick={() => v && setPage(v)}
+                        <PaginationButton
                             key={index}
-                            className={cn('size-9 sm:size-10')}
-                        >
-                            {v}
-                        </Button>
+                            value={value}
+                            page={page}
+                            setPage={setPage}
+                        />
                     );
                 }
 
+                if (value === 'empty') {
+                    return <PaginationEmpty key={index} />;
+                }
+
                 return (
-                    <Input
+                    <PaginationInput
+                        page={page}
+                        setPage={setPage}
+                        pages={pages}
                         key={index}
-                        value={pageToMove}
-                        placeholder="..."
-                        onChange={handleMoveToPage}
-                        onKeyDown={(e) => {
-                            if (!pageToMove) return;
-
-                            if (e.key === 'Enter') {
-                                e.preventDefault();
-                                setPage(parseInt(pageToMove));
-                                setPageToMove('');
-                            }
-                        }}
-                        className={cn(
-                            'size-9 sm:size-10',
-                            pageToMove && 'focus-visible:none  w-16 sm:w-16',
-                        )}
                     />
                 );
             })}
@@ -121,7 +176,7 @@ const Component = ({ page, pages, setPage }: Props) => {
                 variant="outline"
                 onClick={() => setPage(page + 1)}
                 disabled={page === pages}
-                className={clsx('text-xs h-9 w-9 sm:h-10 sm:w-10')}
+                className={cn('size-9 text-xs sm:size-10')}
             >
                 <AntDesignArrowRightOutlined />
             </Button>
@@ -129,4 +184,4 @@ const Component = ({ page, pages, setPage }: Props) => {
     );
 };
 
-export default Component;
+export default Pagination;