added auth

src/App.tsx

 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import AuthPage from './pages/AuthPage';
+import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
+import AuthPage from './pages/AuthPage/AuthPage';
 import HomePage from './pages/HomePage';
 import AddPage from './pages/AddPage';
 import './App.css';
-import RequestPage from './pages/RequestPage';
+import RequestPage from './pages/RequestPage/RequestPage';
 import Header from './partials/Header/Header';
 import EditPage from './pages/EditPage';
 
 import 'react-material-symbols/rounded';
 
-const App: React.FC = () => {
+const AuthLayout = () => {
   return (
     <>
-      <BrowserRouter>
-        <Header />
-        <Routes>
-          <Route path="/auth" element={<AuthPage />} />
+      <Header />
+      <Outlet />
+    </>
+  )
+}
+
+const App: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/auth" element={<AuthPage />} />
+        <Route element={<AuthLayout />} >
           <Route path="/" element={<HomePage />} />
           <Route path="/add" element={<AddPage />} />
           <Route path="/edit" element={<EditPage />} />
           <Route path="/requests" element={<RequestPage />} />
-        </Routes>
-      </BrowserRouter>
-    </>
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 };
 

src/components/Auth/Auth.tsx

-
-const Auth = () => {
-  return (
-    <div>
-      <h1>Auth</h1>
-    </div>
-  )
-}
-
-export default Auth

src/components/HomePage/Home.tsx

@@ -10,7 +10,7 @@ const Home = () => {
         navigate("/add");
     };
 
-    const handlePaginationChange = (page) => {
+    const handlePaginationChange = (page: any) => {
         console.log("Current page:", page);
     };
 

src/pages/AuthPage.tsx

-import React from 'react';
-import Auth from '../components/Auth/Auth';
-
-const AuthPage: React.FC = () => {
-    return (
-        <>
-            <Auth />
-        </>
-    );
-};
-
-export default AuthPage;

src/pages/AuthPage/AuthPage.module.css

+.form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.form_btn {
+    width: 100%;
+    margin-top: .8rem;
+}
+
+.input_controller::placeholder {
+    color: #F178B6;
+}
\ No newline at end of file

src/pages/AuthPage/AuthPage.tsx

+import { Input, Typography, Button } from 'antd';
+import React from 'react';
+import styles from './AuthPage.module.css';
+
+const AuthPage: React.FC = () => {
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.form}>
+                <Typography.Title level={5}>Токен</Typography.Title>
+                <Input
+                    placeholder='введите токен'
+                    className={styles.input_controller}
+                />
+                <Button className={styles.form_btn} type="primary">Войти</Button>
+            </div>
+        </div>
+    );
+};
+
+export default AuthPage;
\ No newline at end of file

src/styles/Home/requiestPage.css → src/pages/RequestPage/RequestPage.module.css

-.pagination-container {
+.pagination_container {
     position: fixed;
     bottom: 0;
     left: 0;

src/pages/RequestPage.tsx → src/pages/RequestPage/RequestPage.tsx

 import React from 'react';
 import { DatePicker, Select, Button, Pagination } from 'antd';
 import dayjs from 'dayjs';
-import '../../src/styles/Home/requiestPage.css';
+import styles from './RequestPage.module.css';
 
 const dateFormat = 'YYYY/MM/DD';
 
 const RequestPage: React.FC = () => {
-    const handlePaginationChange = (page) => {
+    function handlePaginationChange(page: any) {
         console.log("Current page:", page);
-    };
+    }
     
     return (
         <div className='container' style={{minWidth: '1440px'}}>
@@ -112,7 +112,7 @@ const RequestPage: React.FC = () => {
                 <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} />
             </div> */}
 
-            <div className='pagination-container'>
+            <div className={styles.pagination_container}>
                 <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
             </div>
         </div>