apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

registrationSetting #7

Merged
nik.polishuk merged 2 commits from registrationSetting into main 2024-01-11 17:51:58 +03:00
Conversation 0 Commits 2 Files Changed 9 +126 -91
1 changed files with 126 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d5f6f5ba60 - Show all commits

217
src/pages/RegistrationSetting/RegistrationSetting.js
View File

@ -1,68 +1,74 @@
import React, { useState } from "react"; import React, { useState } from "react";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar"; import SideBar from "@components/SideBar/SideBar";
import qa from "assets/icons/QA.svg";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import curse from "assets/icons/curse.svg";
import git from "assets/icons/git.svg";
import myTeam from "assets/icons/myTeam.svg";
import outstaffing from "assets/icons/outstaffing.svg";
import tasks from "assets/icons/tasks.svg";
import arrowInfo from "assets/icons/trackerIntroInfo.svg"; import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import registrationImg from "assets/images/trackerRegistrationImg.png"; import registrationImg from "assets/images/trackerRegistrationImg.png";
import curse from "assets/icons/curse.svg"
import git from "assets/icons/git.svg"
import myTeam from "assets/icons/myTeam.svg"
import outstaffing from "assets/icons/outstaffing.svg"
import qa from "assets/icons/QA.svg"
import tasks from "assets/icons/tasks.svg"
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import "./registrationSetting.scss" import "./registrationSetting.scss";
export const RegistrationSetting = () => { export const RegistrationSetting = () => {
const questions = { const questions = {
countPeople: ['Только я', '2-5', '6-12', '13-40', 'более 50', 'более 100'], countPeople: ["Только я", "2-5", "6-12", "13-40", "более 50", "более 100"],
role: ['Лидер команды', 'Член команды', 'Менеджер', 'Программист', 'Владелец бизнеса'], role: [
"Лидер команды",
"Член команды",
"Менеджер",
"Программист",
"Владелец бизнеса"
],
environment: [ environment: [
{ {
title: 'Задачи и трекер', title: "Задачи и трекер",
subtitle: 'Сервис управления проектами и задачами', subtitle: "Сервис управления проектами и задачами",
icon: tasks, icon: tasks
}, },
{ {
title: 'Моя команда', title: "Моя команда",
subtitle: 'Данные вашего персонала', subtitle: "Данные вашего персонала",
icon: myTeam, icon: myTeam
}, },
{ {
title: 'Тестирование ', title: "Тестирование ",
subtitle: 'Сотрудники для вашего сервиса', subtitle: "Сотрудники для вашего сервиса",
icon: qa, icon: qa
}, },
{ {
title: 'Гит', title: "Гит",
subtitle: 'ПО для хостинга IT-проектов и совместной разработки на базе Git', subtitle:
icon: git, "ПО для хостинга IT-проектов и совместной разработки на базе Git",
icon: git
}, },
{ {
title: 'Аутстафинг', title: "Аутстафинг",
subtitle: 'Каталог IT специалистов', subtitle: "Каталог IT специалистов",
icon: outstaffing, icon: outstaffing
}, },
{ {
title: 'Курсы IT ', title: "Курсы IT ",
subtitle: 'Обучайтесь сами обучайте персонал', subtitle: "Обучайтесь сами обучайте персонал",
icon: curse, icon: curse
} }
] ]
} };
const [selectedOptions, setSelectedOptions] = useState({ const [selectedOptions, setSelectedOptions] = useState({
countPeople: '', countPeople: "",
role: '' role: ""
}) });
const [selectedEnvironment, setSelectedEnvironment] = useState([]) const [selectedEnvironment, setSelectedEnvironment] = useState([]);
const [step, setStep] = useState(1) const [step, setStep] = useState(1);
return ( return (
<div className="registrationSetting"> <div className="registrationSetting">
@ -71,7 +77,7 @@ export const RegistrationSetting = () => {
<div className="registrationSetting__content"> <div className="registrationSetting__content">
<div className="container"> <div className="container">
<h1 className="registrationSetting__title"> <h1 className="registrationSetting__title">
Добро пожаловать {" "} Добро пожаловать{" "}
<span> <span>
в ITGuild в ITGuild
<img src={arrowInfo} alt="arrow" /> <img src={arrowInfo} alt="arrow" />
@ -93,15 +99,23 @@ export const RegistrationSetting = () => {
</h3> </h3>
<div className="questionBlock__answers"> <div className="questionBlock__answers">
{questions.countPeople.map((item, index) => { {questions.countPeople.map((item, index) => {
return <button return (
onClick={() => setSelectedOptions((prevState) => ({...prevState, countPeople: item}))} <button
key={index} onClick={() =>
className={item === selectedOptions.countPeople ? 'active' : ''} setSelectedOptions((prevState) => ({
> ...prevState,
{item} countPeople: item
</button> }))
}) }
} key={index}
className={
item === selectedOptions.countPeople ? "active" : ""
}
>
{item}
</button>
);
})}
</div> </div>
<img <img
className="registrationSetting__question__img" className="registrationSetting__question__img"
@ -109,73 +123,94 @@ export const RegistrationSetting = () => {
alt="img" alt="img"
/> />
</div> </div>
{step >= 2 && {step >= 2 && (
<div className="registrationSetting__question questionBlock"> <div className="registrationSetting__question questionBlock">
<h3 className="questionBlock__question"> <h3 className="questionBlock__question">Какая у тебя роль?</h3>
Какая у тебя роль?
</h3>
<div className="questionBlock__answers"> <div className="questionBlock__answers">
{questions.role.map((item, index) => { {questions.role.map((item, index) => {
return <button return (
onClick={() => setSelectedOptions((prevState) => ({...prevState, role: item}))} <button
key={index} onClick={() =>
className={item === selectedOptions.role ? 'active' : ''} setSelectedOptions((prevState) => ({
> ...prevState,
{item} role: item
</button> }))
}) }
} key={index}
className={item === selectedOptions.role ? "active" : ""}
>
{item}
</button>
);
})}
</div> </div>
</div> </div>
} )}
{step >= 3 && {step >= 3 && (
<div className="registrationSetting__environment environment"> <div className="registrationSetting__environment environment">
<span className="environment__suptitle">Организуй комфортную среду для продуктивности</span> <span className="environment__suptitle">
<h3 className="environment__title">Добавь сервисы для своего рабочего пространства</h3> Организуй комфортную среду для продуктивности
</span>
<h3 className="environment__title">
Добавь сервисы для своего рабочего пространства
</h3>
<div className="environment__items"> <div className="environment__items">
{questions.environment.map((item, index) => { {questions.environment.map((item, index) => {
return <div return (
className={selectedEnvironment.includes(item.title) ? "environment__item item item--active" : "environment__item item" } <div
key={index} className={
onClick={() => { selectedEnvironment.includes(item.title)
if (selectedEnvironment.includes(item.title)) { ? "environment__item item item--active"
setSelectedEnvironment((prevState) => prevState.filter((name) => name !== item.title)) : "environment__item item"
} else {
setSelectedEnvironment((prevState) => [...prevState, item.title])
} }
}} key={index}
> onClick={() => {
<div className="item__head"> if (selectedEnvironment.includes(item.title)) {
<img src={item.icon} alt='icon' /> setSelectedEnvironment((prevState) =>
<h5>{item.title}</h5> prevState.filter((name) => name !== item.title)
</div> );
<div className="item__bottom"> } else {
<p>{item.subtitle}</p> setSelectedEnvironment((prevState) => [
<div className="arrow"> ...prevState,
<img src={rightArrow} alt='arrow' /> item.title
]);
}
}}
>
<div className="item__head">
<img src={item.icon} alt="icon" />
<h5>{item.title}</h5>
</div>
<div className="item__bottom">
<p>{item.subtitle}</p>
<div className="arrow">
<img src={rightArrow} alt="arrow" />
</div>
</div> </div>
</div> </div>
</div> );
}) })}
}
</div> </div>
<button className="registrationSetting__continue registrationSetting__done">Готово</button> <button className="registrationSetting__continue registrationSetting__done">
Готово
</button>
</div> </div>
} )}
{step !== 3 && {step !== 3 && (
<button <button
onClick={() => { onClick={() => {
if (step === 1 && selectedOptions.countPeople) { if (step === 1 && selectedOptions.countPeople) {
setStep((prevState) => prevState + 1) setStep((prevState) => prevState + 1);
} }
if (step === 2 && selectedOptions.role) { if (step === 2 && selectedOptions.role) {
setStep((prevState) => prevState + 1) setStep((prevState) => prevState + 1);
} }
}} }}
className="registrationSetting__continue"> className="registrationSetting__continue"
>
Продолжить Продолжить
</button> </button>
} )}
</div> </div>
<Footer /> <Footer />
</div> </div>