creating my polls page

SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css

@@ -1,7 +1,6 @@
 /*AddQuestionButton.module.css*/
 
 .questionButton{
-    display: block;
     margin: 0 auto;
     display: flex;
     flex-direction: column;

SurveyFrontend/src/components/Header/Header.tsx

@@ -8,22 +8,23 @@ import {Link, useLocation} from "react-router-dom";
 
 const Header: React.FC = () => {
     const location = useLocation();
-    const isCreateSurveyActive = location.pathname.includes('/survey/edit');
-    const isMySurveyActive = location.pathname === '/my-surveys';
+    const isCreateSurveyActive = location.pathname.includes('/survey/create');
+    const isSurveyPage = location.pathname.includes('/survey/') && !location.pathname.includes('/survey/create');
+    const isMySurveysPage = location.pathname === '/my-surveys' || isSurveyPage;
 
     return (
         <div className={styles.header}>
             <Logo href='/' />
             <nav className={styles.pagesNav}>
-                <Link to='/survey/edit/questions'
+                <Link to='/survey/create/questions'
                 className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}>
                     Создать опрос
                     {isCreateSurveyActive && <hr className={styles.activeLine}/>}
                 </Link>
                 <Link to='/my-surveys'
-                className={`${styles.pageLink} ${isMySurveyActive ? styles.active : ''}`}>
+                className={`${styles.pageLink} ${isMySurveysPage ? styles.active : ''}`}>
                     Мои опросы
-                    {isMySurveyActive && <hr className={styles.activeLine}/>}
+                    {isMySurveysPage && <hr className={styles.activeLine}/>}
                 </Link>
             </nav>
             <Account

SurveyFrontend/src/components/MySurveyList/MySurveyList.tsx

@@ -0,0 +1,60 @@
+import styles from './MySurveysList.module.css'
+import {useNavigate} from "react-router-dom";
+
+interface MySurveyItem{
+    id: string,
+    title: string,
+    description: string,
+    date: string
+    status: 'active' | 'completed'
+}
+
+export const MySurveyList = () => {
+    const navigate = useNavigate();
+
+    const surveys: MySurveyItem[] = [
+        {
+            id: '1',
+            title: 'Опрос 1',
+            description: 'Описание опроса 1',
+            date: '27-04-2025',
+            status: 'active',
+        },
+        {
+            id: '2',
+            title: 'Опрос 2',
+            description: 'Описание опроса 2',
+            date: '01-01-2025',
+            status: 'completed',
+        }
+    ]
+
+    const handleSurveyClick = (id: string) => {
+        navigate(`/survey/${id}/questions`)
+    }
+
+    return(
+        <div className={styles.main}>
+            {surveys.map((survey) => (
+                <div
+                    key={survey.id}
+                    className={styles.survey}
+                    onClick={() => handleSurveyClick(survey.id)}
+                    role="button"
+                    tabIndex={0}
+                >
+                    <div>
+                        <h1 className={styles.title}>{survey.title}</h1>
+                        <h2 className={styles.description}>{survey.description}</h2>
+                        <span className={styles.date}>Дата создания: {survey.date}</span>
+                    </div>
+                    <div className={`${styles.status} ${
+                        survey.status === 'active' ? styles.active : styles.completed
+                    }`}>
+                        {survey.status === 'active' ? 'Активен' : 'Завершён'}
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+}

SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css

@@ -0,0 +1,34 @@
+.main{
+    background-color: #F6F6F6;
+    width: 100%;
+    height: 100vh;
+    padding: 34px 8%;
+}
+
+.survey{
+    display: flex;
+    justify-content: space-between;
+    background-color: #FFFFFF;
+    width: 79%;
+    border-radius: 14px;
+    padding: 29px 36px 29px 54px;
+    margin-bottom: 23px;
+}
+
+.completed{
+    width: fit-content;
+    height: fit-content;
+    padding: 15px 47px;
+    border-radius: 15px;
+    background-color: #65B953;
+    color: #FFFFFF;
+}
+
+.active{
+    width: fit-content;
+    height: fit-content;
+    padding: 15px 47px;
+    border-radius: 15px;
+    background-color: #B0B0B0;
+    color: #FFFFFF;
+}

SurveyFrontend/src/components/Navigation/Navigation.tsx

@@ -4,22 +4,28 @@ import styles from './Navigation.module.css'
 import NavigationItem from "../NavigationItem/NavigationItem.tsx";
 import SaveButton from "../SaveButton/SaveButton.tsx";
 
-
 const Navigation: React.FC = () => {
     const location = useLocation();
     const navigate = useNavigate();
 
-    const activePage = location.pathname.split('/').pop() || 'questions'
+    const isSurveyPage = /\/survey\/[^/]+/.test(location.pathname);
+    const isNotCreateSurvey = !location.pathname.includes('/survey/create');
+    const isMySurveysPage = isSurveyPage && isNotCreateSurvey;
 
-    const items = [
+    const activePage = location.pathname.split('/').pop() ?? 'questions';
+
+    const baseItems = [
         {id: 'questions', title: 'Вопросы'},
-        {id: 'settings', title: 'Настройки'},
-        {id: 'results', title: 'Результаты'}
-    ]
+        {id: 'settings', title: 'Настройки'}
+    ];
 
-    const handleNavigationClick = (padeId: string) => {
-        navigate(`${padeId}`);
-    }
+    const items = isMySurveysPage
+        ? [...baseItems, {id: 'results', title: 'Результаты'}]
+        : baseItems;
+
+    const handleNavigationClick = (pageId: string) => {
+        navigate(`${pageId}`, { relative: 'path' });
+    };
 
     return (
         <div className={styles.navContainer}>
@@ -35,7 +41,6 @@ const Navigation: React.FC = () => {
                     ))}
                 </ul>
             </nav>
-
             <SaveButton />
         </div>
     );

SurveyFrontend/src/components/Results/Results.module.css

@@ -0,0 +1,5 @@
+/*Results.module.css*/
+
+.results{
+    width: 85%;
+}

SurveyFrontend/src/components/Results/Results.tsx

@@ -0,0 +1,10 @@
+import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
+import styles from './Results.module.css'
+
+export const Results = () => {
+    return(
+        <div className={styles.results}>
+            <SurveyInfo />
+        </div>
+    )
+}

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css

@@ -13,7 +13,7 @@
 .info{
     min-width: 373px;
     display: block;
-    padding: 35px; /*подумать нужно ли справа слева отступы*/
+    padding: 35px;
 }
 
 .titleSurvey{

SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css

@@ -4,7 +4,6 @@
     width: 23%;
     position: relative;
     display: inline-block;
-    /*margin-right: 29px;*/
     margin-left: auto;
 }