open page settings

SurveyFrontend/src/components/MainComponent/MainComponent.tsx

@@ -2,6 +2,7 @@ import Navigation from "../Navigation/Navigation.tsx";
 import React, {useState} from "react";
 import styles from './MainComponent.module.css'
 import Survey from "../Survey/Survey.tsx";
+import SettingSurvey from "../SettingSurvey/SettingSurvey.tsx";
 
 const MainComponent: React.FC = () => {
     const [activePage, setActivePage] = useState('Вопросы');
@@ -16,7 +17,8 @@ const MainComponent: React.FC = () => {
                 activePage={activePage}
                 onNavigationClick={handleNavigationClick}
             />
-            <Survey />
+            { activePage === 'Вопросы' && <Survey />}
+            {activePage === 'Настройки' && <SettingSurvey />}
         </main>
     )
 }

SurveyFrontend/src/components/NavigationItem/NavigationItem.tsx

@@ -4,7 +4,7 @@ import styles from './NavigationItem.module.css'
 interface NavigationItemProps{
     title: string;
     onClick(): void;
-    isActive: boolean; //Дописать для активной ссылки, для класса
+    isActive: boolean;
 }
 
 const NavigationItem: React.FC<NavigationItemProps> = ({title, onClick, isActive}) => {

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css

@@ -0,0 +1,6 @@
+/*SettingSurvey.module.css*/
+
+.settingSurvey{
+    width: 65%;
+    margin-left: 8.9%;
+}

SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
+import styles from "./SettingSurvey.module.css";
+
+
+const SettingSurvey: React.FC = () => {
+    return (
+        <div className={styles.settingSurvey}>
+            <SurveyInfo />
+        </div>
+    )
+}
+
+export default SettingSurvey;

SurveyFrontend/src/components/TimeEvent/TimeEvent.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+interface TimeEventProps {
+    title: string;
+
+}
+
+const TimeEvent: React.FC<TimeEventProps> = ({title}) => {
+    return (
+        <div>
+            <h2>{title}</h2>
+            <div>
+
+            </div>
+        </div>
+    );
+};
+
+export default TimeEvent;

SurveyFrontend/src/pages/Results.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Header from "../components/Header/Header.tsx";
+
+
+const Results: React.FC = () => {
+    return (
+        <Header />
+    )
+}
+
+export default Results;

SurveyFrontend/src/pages/Settings.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from "../components/Header/Header.tsx";
+import MainComponent from "../components/MainComponent/MainComponent.tsx";
+
+
+const Settings: React.FC = () => {
+    return (
+        <>
+            <Header />
+            <MainComponent />
+        </>
+    );
+};
+
+export default Settings;