sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

routing

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-04-27 20:07:28 +05:00
parent eda38247ba
commit 28882e7038
10 changed files with 190 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

23
SurveyFrontend/src/App.tsx
View file

@ -1,11 +1,22 @@
import React from 'react';
import './App.css'
import Questions from './pages/Questions.tsx'
import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
import {SurveyEditingPage} from "./pages/SurveyEditingPage/SurveyEditingPage.tsx";
import Survey from "./components/Survey/Survey.tsx";
import SettingSurvey from "./components/SettingSurvey/SettingSurvey.tsx";
const App: React.FC = () => {
return (
<Questions />
)
const App = () => {
return(
<BrowserRouter>
<Routes>
<Route path="/" element={<Navigate to="/survey/edit/questions" replace />} />
<Route path="survey/edit" element={<SurveyEditingPage />}>
<Route path="questions" element={<Survey />} />
<Route path="settings" element={<SettingSurvey />} />
</Route>
</Routes>
</BrowserRouter>
);
}

35
SurveyFrontend/src/components/Header/Header.module.css
View file

@ -5,4 +5,39 @@
padding: 0;
width: 100%;
display: flex;
}
.pagesNav{
display: flex;
gap: 60px;
list-style: none;
align-items: center;
margin-right: 40%;
}
.pageLink{
font-size: 24px;
font-weight: 600;
color: #2A6DAE;
padding: 0;
border: none;
background-color: #ffffff;
white-space: nowrap;
text-decoration: none;
}
.active{
margin-bottom: -15px;
color: #000000;
text-decoration-color: #3881C8;
}
.activeLine{
display: block;
margin-top: 5px;
border: 1px solid #000000;
width: 50%;
padding: 0;
box-shadow: 0 1px 4px 0 #3881C8;
}

32
SurveyFrontend/src/components/Header/Header.tsx
View file

@ -1,27 +1,33 @@
import React, {useState} from "react";
import React from "react";
import Logo from "../Logo/Logo.tsx";
import Account from "../Account/Account.tsx";
import styles from './Header.module.css'
import SurveyPagesList from "../SurveyPagesList/SurveyPagesList.tsx";
import {Link, useLocation} from "react-router-dom";
const Header: React.FC = () => {
const [activePage, setActivePage] = useState('Создать опрос');
const handlePageClick = (name: string)=> {
setActivePage(name);
}
const location = useLocation();
const isCreateSurveyActive = location.pathname.includes('/survey/edit');
const isMySurveyActive = location.pathname === '/my-surveys';
return (
<div className={styles.header}>
<Logo href='' />
<SurveyPagesList
activePage={activePage}
onPageClick = {handlePageClick}
/>
<Logo href='/' />
<nav className={styles.pagesNav}>
<Link to='/survey/edit/questions'
className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}>
Создать опрос
{isCreateSurveyActive && <hr className={styles.activeLine}/>}
</Link>
<Link to='/my-surveys'
className={`${styles.pageLink} ${isMySurveyActive ? styles.active : ''}`}>
Мои опросы
{isMySurveyActive && <hr className={styles.activeLine}/>}
</Link>
</nav>
<Account
href=''
href='/profile'
user='Иванов Иван'
/>
</div>

30
SurveyFrontend/src/components/Navigation/Navigation.tsx
View file

@ -1,15 +1,25 @@
import React from 'react'
import {useLocation, useNavigate} from 'react-router-dom'
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[] = ['Вопросы', 'Настройки', 'Результаты']
const Navigation: React.FC = () => {
const location = useLocation();
const navigate = useNavigate();
const activePage = location.pathname.split('/').pop() || 'questions'
const items = [
{id: 'questions', title: 'Вопросы'},
{id: 'settings', title: 'Настройки'},
{id: 'results', title: 'Результаты'}
]
const handleNavigationClick = (padeId: string) => {
navigate(`${padeId}`);
}
return (
<div className={styles.navContainer}>
@ -17,10 +27,10 @@ const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage})
<ul className={styles.navList}>
{items.map(item => (
<NavigationItem
key={item}
title={item}
isActive={activePage === item}
onClick={() => onNavigationClick(item)}
key={item.id}
title={item.title}
isActive={activePage === item.id}
onClick={() => handleNavigationClick(item.id)}
/>
))}
</ul>

3
SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
View file

@ -1,8 +1,7 @@
/*SettingSurvey.module.css*/
.settingSurvey{
width: 65%;
margin-left: 8.9%;
width: 85%;
}
.startEndTime{

3
SurveyFrontend/src/components/Survey/Survey.module.css
View file

@ -1,6 +1,5 @@
/*Survey.module.css*/
.survey{
width: 65%;
margin-left: 8.9%;
width: 85%;
}

17
SurveyFrontend/src/pages/SurveyEditingPage/SurveyEditingPage.module.css Normal file
View file

@ -0,0 +1,17 @@
/*SurveyEditingPage.module.css*/
.layout{
width: 100%;
}
.main{
width: 100%;
min-height: 85vh;
display: flex;
background-color: #F6F6F6;
}
.content{
width: 100%;
margin-left: 8.9%;
}

18
SurveyFrontend/src/pages/SurveyEditingPage/SurveyEditingPage.tsx Normal file
View file

@ -0,0 +1,18 @@
import Header from "../../components/Header/Header.tsx";
import Navigation from "../../components/Navigation/Navigation.tsx";
import styles from './SurveyEditingPage.module.css'
import { Outlet } from "react-router-dom";
export const SurveyEditingPage = () => {
return (
<div className={styles.layout}>
<Header />
<div className={styles.main}>
<Navigation />
<div className={styles.content}>
<Outlet />
</div>
</div>
</div>
);
};