components

SurveyFrontend/src/components/SurveyPagesList/SurveyPagesList.module.css

@@ -0,0 +1,7 @@
+.listSurveyPages{
+    display: flex;
+    gap: 61px;
+    list-style: none;
+    align-items: center;
+    margin-right: 900px;
+}

SurveyFrontend/src/components/SurveyPagesList/SurveyPagesList.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './SurveyPagesList.module.css';
+import PageSurvey from "../PageSurvey/PageSurvey.tsx";
+
+interface SurveyPagesListProps{
+    activePage: string;
+    onPageClick: (name: string) =>  void;
+}
+
+const SurveyPagesList: React.FC<SurveyPagesListProps> = ({activePage, onPageClick}) => {
+    const listPages: string[] = ['Создать опрос', 'Мои опросы']
+
+    return (
+        <ul className={styles.listSurveyPages}>
+            {listPages.map((page) => (
+                <PageSurvey
+                    key={page}
+                    name={page}
+                    isActive={activePage === page}
+                    onClick={() => onPageClick(page)}
+                />
+            ))}
+        </ul>
+    );
+};
+
+export default SurveyPagesList;