components

SurveyFrontend/src/components/Navigation/Navigation.module.css

@@ -0,0 +1,12 @@
+/*Navigation.module.css*/
+
+.nav{
+    margin: 34px 0 48px 40px;
+    background-color: white;
+    border-radius: 20px;
+}
+
+.navList{
+    list-style: none;
+    padding: 52px 57px 70px 36px;
+}

SurveyFrontend/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styles from './Navigation.module.css'
+import NavigationItem from "../NavigationItem/NavigationItem.tsx";
+import SaveButton from "../SaveButton/SaveButton.tsx";
+
+interface NavigationProps {
+    onNavigationClick: (title: string) => void;
+    activePage: string
+}
+
+const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage}) => {
+    const items: string[] = ['Вопросы', 'Настройки', 'Результаты']
+
+    return (
+        <div>
+            <nav className={styles.nav}>
+                <ul className={styles.navList}>
+                    {items.map(item => (
+                        <NavigationItem
+                            key={item}
+                            title={item}
+                            isActive={activePage === item}
+                            onClick={() => onNavigationClick(item)}
+                        />
+                    ))}
+                </ul>
+            </nav>
+
+            <SaveButton />
+        </div>
+    );
+};
+
+export default Navigation;