pagination

src/components/HomePage/Home.tsx

 import { useNavigate } from 'react-router';
 import '../../styles/Home/home.css';
 import add from "/section_add.png";
+import { Pagination } from 'antd';
 
 const Home = () => {
     const navigate = useNavigate();
@@ -8,7 +9,7 @@ const Home = () => {
     return (
         <section className='section'>
             <div className="add">
-                <img src={add} alt="add_png" onClick={() => navigate("/add")} className='add_button'/>
+                <img src={add} alt="add_png" onClick={() => navigate("/add")} className='add_button' />
                 <span className='add_title'>Добавить</span>
             </div>
             <div className="data">
@@ -59,8 +60,11 @@ const Home = () => {
                     </tbody>
                 </table>
             </div>
+            <div className='pagination-container'>
+                <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} />
+            </div>
         </section>
     )
 }
 
-export default Home
+export default Home;

src/pages/RequestPage.tsx

 import React from 'react';
 import { DatePicker, Select, Button, Pagination } from 'antd';
 import dayjs from 'dayjs';
+import '../../src/styles/Home/requiestPage.css';
 
 const dateFormat = 'YYYY/MM/DD';
 
@@ -103,7 +104,11 @@ const RequestPage: React.FC = () => {
                     </table>
                 </div>
             </section>
-            <div className='pagination' style={{marginTop: 300, display: 'flex', justifyContent: "center"}}>
+            {/* <div className='pagination-container' style={{marginTop: 300, display: 'flex', justifyContent: "center"}}>
+                <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} />
+            </div> */}
+
+            <div className='pagination-container'>
                 <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} />
             </div>
         </div>

src/styles/Home/home.css

@@ -3,9 +3,13 @@
     margin-top: 10px;
     margin-left: 20px;
     margin-right: 20px;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 60px);
+    /* Adjust based on your header height */
 }
 
-.add{
+.add {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
@@ -24,13 +28,17 @@
     transform: scale(1.1);
 }
 
-
-.add_title{
+.add_title {
     font-size: 12px;
     line-height: 18px;
     margin-left: 2px;
 }
 
+.data {
+    flex: 1;
+    overflow-y: auto;
+}
+
 .data-table {
     min-width: 100%;
     border-collapse: collapse;
@@ -75,4 +83,16 @@
 .view-btn:hover,
 .delete-btn:hover {
     opacity: 0.7;
+}
+
+.pagination-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: white;
+    padding: 10px 20px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
 }
\ No newline at end of file

src/styles/Home/requiestPage.css

+.pagination-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: white;
+    padding: 10px 20px;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file