Рабочая пагинация 2 версии

src/paginatedList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LinkBox, LinkOverlay, HStack, Box } from '@chakra-ui/react';
-import Counter from "./counter";
+import Pagination from "./pagination";
 
 let arr = []
 function generation () {
@@ -14,7 +14,7 @@ function generation () {
 
 export default () => {
 
-    const [page, setPage] = React.useState<number>(1)
+    const [page, setPage] = React.useState<number>(10)
 
     function onPageChange (page: number) {
         setPage(page)
@@ -28,7 +28,7 @@ export default () => {
 
                 </Box>
                 <Box>
-                    <Counter
+                    <Pagination
                         count={10}
                         current={page}
                         onPageChange={onPageChange}

src/pagination.tsx

@@ -0,0 +1,81 @@
+import React, {useEffect} from 'react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
+import { LinkBox, LinkOverlay, HStack, Box, Button, Text, NumberInput, NumberInputField, NumberIncrementStepper,
+    NumberDecrementStepper, NumberInputStepper,
+} from '@chakra-ui/react';
+
+interface propsTS {
+    count: number
+    current: number
+
+    onPageChange(e: number): void
+}
+
+export default ({
+   count,
+   current,
+   onPageChange,
+}: propsTS) => {
+
+    //Проверка, что пришедшие данные валидны
+    if(count <= 0 || current <= 0) {return <Text>Указанные значения ниже нуля</Text>}
+    if(count < current) {return <Text>Текущая страница больше общего числа</Text>}
+
+    // =====\/======
+    // |n-1||n||n+1| - указатель в середине
+    // =\/==========
+    // |1||2||3|     - указатель в начале
+    // ===========\/
+    // |n-2||n-1||n| - указатель в конце
+    // =============
+
+    const left = current === 1 ?
+        // Указатель в начале
+        1 :
+        current === count ?
+        // указатель в конце | указатель в середине
+        current - 2 : current - 1
+
+    const center = current === 1 ?
+        // Указатель в начале
+        2 :
+        current === count ?
+            // указатель в конце | указатель в середине
+            current - 1 : current
+
+    const right = current === 1 ?
+        // Указатель в начале
+        3 :
+        current === count ?
+            // указатель в конце | указатель в середине
+            current : current + 1
+
+
+    return(
+        <HStack>
+            <Button onClick={() => {onPageChange(1)}} key={0} leftIcon={<ArrowLeftIcon/>}/>
+
+            <Button color={current === left ? "blue" : ""} onClick={() => {onPageChange(left)}} key={1}>{left}</Button>
+            <Button color={current === center ? "blue" : ""} onClick={() => {onPageChange(center)}} key={2}>{center}</Button>
+            <Button color={current === right ? "blue" : ""} onClick={() => {onPageChange(right)}} key={3}>{right}</Button>
+
+            <Button onClick={() => {onPageChange(count)}} key={4} rightIcon={<ArrowRightIcon/>}/>
+
+            <NumberInput
+                size='sm'
+                max={count}
+                maxW={"80px"}
+                value={current}
+                min={1}
+                onChange={(e) => onPageChange(Number(e))}
+            >
+                <NumberInputField />
+                <NumberInputStepper>
+                    <NumberIncrementStepper />
+                    <NumberDecrementStepper />
+                </NumberInputStepper>
+            </NumberInput>
+            <Text> из {count}</Text>
+        </HStack>
+    )
+}