added pakets

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { Divider } from '@mui/material';
 import Pagination from '@mui/material/Pagination';
 import Stack from '@mui/material/Stack';
-import { Divider } from '@mui/material';
+import * as React from 'react';
 
 interface BasePaginationProps {
     page: number;
@@ -23,9 +23,9 @@ export default function BasePagination({ page, pageSize, totalCount, onChange }:
             let newPage = inputValue;
 
             if (inputValue === 0) {
-                newPage = 1;  // Agar 0 kiritsa, 1 page ga o‘tsin
+                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
+                newPage = maxPage; // Max page dan oshsa, max page ga o‘tsin
             }
 
             if (newPage !== page) {
@@ -37,14 +37,15 @@ export default function BasePagination({ page, pageSize, totalCount, onChange }:
     }, [inputValue, page, totalCount, pageSize, onChange]);
 
     return (
-        <Stack spacing={2} direction="row" divider={<Divider orientation="vertical" flexItem />}>
+        <Stack spacing={2} direction='row' divider={<Divider orientation='vertical' flexItem />}>
             <Pagination
                 page={page}
+                size='large'
                 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,
@@ -54,10 +55,10 @@ 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))}
+                type='number'
+                style={{ width: '50px', textAlign: 'center', outline: 'none' }}
+                onChange={e => setInputValue(Number(e.target.value))}
             />
         </Stack>
     );
-}
+}