created MainLayout

src/App.js

@@ -19,6 +19,10 @@ function App() {
       <Route path="/login" element={<LoginPage />} />
       <Route path="/signup" element={<SignUpPage />} />
 
+      {/* <>
+        <PrivateRoute />
+      </> */}
+
       <Route
         path="/settings"
         element={

src/layouts/MainLayout.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Header } from '../components/Header/Header';
+import { Footer } from '../components/Footer/Footer';
+
+export const MainLayout = ({ children, className }) => {
+  return (
+    <div className={className}>
+      <Header />
+      <main>{children}</main>
+      <Footer />
+    </div>
+  );
+};

src/layouts/PrivateRoute.jsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { Route, useNavigate } from 'react-router-dom';
+import { SettingsPage } from '../pages/SettingsPage/SettingsPage';
 
 export const PrivateRoute = ({ children }) => {
   const { isAuth } = useSelector((state) => state.auth);

src/pages/SettingsPage/SettingsPage.jsx

@@ -1,14 +1,11 @@
-import React from 'react';
-import { Header } from '../../components/Header/Header';
 import style from './SettingsPage.module.scss';
 import { ImageUploader } from '../../components/ImageUploader/ImageUploader';
 import { UpdatePassword } from '../../components/UpdatePassword/UpdatePassword';
+import { MainLayout } from '../../layouts/MainLayout';
 
 export const SettingsPage = () => {
   return (
-    <div className={style.settings}>
-      <Header />
-
+    <MainLayout className={style.settings}>
       <div className={style.container}>
         <h1>Settings</h1>
 
@@ -21,6 +18,6 @@ export const SettingsPage = () => {
           <UpdatePassword />
         </div>
       </div>
-    </div>
+    </MainLayout>
   );
 };

src/pages/YourWorksPage/YourWorksPage.jsx

@@ -9,6 +9,7 @@ import { CreateWorkPopup } from '../../components/CreateWorkPopup/CreateWorkPopu
 import { LoadingPage } from '../LoadingPage/LoadingPage';
 import { fetchWorks } from '../../store/works/actions/fetchWorks';
 import { Works } from '../../components/Works/Works';
+import { MainLayout } from '../../layouts/MainLayout';
 
 export const YourWorksPage = () => {
   const dispatch = useDispatch();
@@ -26,9 +27,7 @@ export const YourWorksPage = () => {
 
   if (isLoading) return <LoadingPage />;
   return (
-    <div className={style.yourWorks}>
-      <Header />
-
+    <MainLayout className={style.yourWorks}>
       <div className={style.container}>
         <div className={style.worksTab}>
           <a className={style.active} href="/your-works">
@@ -41,8 +40,6 @@ export const YourWorksPage = () => {
       </div>
 
       {isPopupVisible && <CreateWorkPopup popupRef={ref} close={close} />}
-
-      <Footer />
-    </div>
+    </MainLayout>
   );
 };

src/pages/YourWorksPage/YourWorksPage.module.scss

@@ -6,35 +6,37 @@
   min-height: 100vh;
   height: fit-content;
 
-  .container {
-    @include container();
-    flex-grow: 1;
-    height: 100%;
-    margin-bottom: 40px;
+  
+}
 
-    .worksTab {
-      margin: 20px 0 10px;
-      border-bottom: 3px solid #2c303a;
-      padding-bottom: 10px;
+.container {
+  @include container();
+  flex-grow: 1;
+  height: 100%;
+  margin-bottom: 40px;
+
+  .worksTab {
+    margin: 20px 0 10px;
+    border-bottom: 3px solid #2c303a;
+    padding-bottom: 10px;
 
-      .active {
-        text-decoration: none;
-        color: white;
-        font-size: 30px;
-        border-bottom: 3px solid $greenMain;
-        padding-bottom: 10px;
-      }
+    .active {
+      text-decoration: none;
+      color: white;
+      font-size: 30px;
+      border-bottom: 3px solid $greenMain;
+      padding-bottom: 10px;
+    }
 
-      .active:hover {
-        border-bottom: 3px solid $greenMain-hover;
-      }
-      button {
-        @extend %buttonGreen;
-        margin-top: 5px;
-        font-size: 28px;
-        padding: 0px 20px;
-        float: right;
-      }
+    .active:hover {
+      border-bottom: 3px solid $greenMain-hover;
+    }
+    button {
+      @extend %buttonGreen;
+      margin-top: 5px;
+      font-size: 28px;
+      padding: 0px 20px;
+      float: right;
     }
   }
 }