pagination

src/components/ui-kit/BasePagination/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Pagination from '@mui/material/Pagination';
 import Stack from '@mui/material/Stack';
+import { Divider } from '@mui/material';
 
 interface BasePaginationProps {
     page: number;
@@ -10,15 +11,40 @@ interface BasePaginationProps {
 }
 
 export default function BasePagination({ page, pageSize, totalCount, onChange }: BasePaginationProps) {
+    const [inputValue, setInputValue] = React.useState(page);
+
+    React.useEffect(() => {
+        setInputValue(page);
+    }, [page]);
+
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            const maxPage = Math.ceil(totalCount / pageSize);
+            let newPage = inputValue;
+
+            if (inputValue === 0) {
+                newPage = 1;  // Agar 0 kiritsa, 1 page ga o‘tsin
+            } else if (inputValue > maxPage) {
+                newPage = maxPage;  // Max page dan oshsa, max page ga o‘tsin
+            }
+
+            if (newPage !== page) {
+                onChange(newPage);
+            }
+        }, 1000);
+
+        return () => clearTimeout(handler);
+    }, [inputValue, page, totalCount, pageSize, onChange]);
+
     return (
-        <Stack spacing={2}>
+        <Stack spacing={2} direction="row" divider={<Divider orientation="vertical" flexItem />}>
             <Pagination
                 page={page}
                 count={Math.ceil(totalCount / pageSize)}
                 onChange={(_, newPage) => onChange(newPage)}
-                variant='outlined'
-                shape='rounded'
-                color='primary'
+                variant="outlined"
+                shape="rounded"
+                color="primary"
                 sx={{
                     '.Mui-selected': {
                         backgroundColor: theme => theme.palette.primary.main,
@@ -26,6 +52,12 @@ export default function BasePagination({ page, pageSize, totalCount, onChange }:
                     },
                 }}
             />
+            <input
+                value={inputValue}
+                type="number"
+                style={{ width: "50px", textAlign: "center", outline: "none" }}
+                onChange={(e) => setInputValue(Number(e.target.value))}
+            />
         </Stack>
     );
-}
+}