registration setting
This commit is contained in:
parent
d8e34980f2
commit
d5f6f5ba60
@ -4,65 +4,71 @@ 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
|
||||||
|
onClick={() =>
|
||||||
|
setSelectedOptions((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
countPeople: item
|
||||||
|
}))
|
||||||
|
}
|
||||||
key={index}
|
key={index}
|
||||||
className={item === selectedOptions.countPeople ? 'active' : ''}
|
className={
|
||||||
|
item === selectedOptions.countPeople ? "active" : ""
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{item}
|
{item}
|
||||||
</button>
|
</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
|
||||||
|
onClick={() =>
|
||||||
|
setSelectedOptions((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
role: item
|
||||||
|
}))
|
||||||
|
}
|
||||||
key={index}
|
key={index}
|
||||||
className={item === selectedOptions.role ? 'active' : ''}
|
className={item === selectedOptions.role ? "active" : ""}
|
||||||
>
|
>
|
||||||
{item}
|
{item}
|
||||||
</button>
|
</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
|
||||||
|
className={
|
||||||
|
selectedEnvironment.includes(item.title)
|
||||||
|
? "environment__item item item--active"
|
||||||
|
: "environment__item item"
|
||||||
|
}
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (selectedEnvironment.includes(item.title)) {
|
if (selectedEnvironment.includes(item.title)) {
|
||||||
setSelectedEnvironment((prevState) => prevState.filter((name) => name !== item.title))
|
setSelectedEnvironment((prevState) =>
|
||||||
|
prevState.filter((name) => name !== item.title)
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
setSelectedEnvironment((prevState) => [...prevState, item.title])
|
setSelectedEnvironment((prevState) => [
|
||||||
|
...prevState,
|
||||||
|
item.title
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="item__head">
|
<div className="item__head">
|
||||||
<img src={item.icon} alt='icon' />
|
<img src={item.icon} alt="icon" />
|
||||||
<h5>{item.title}</h5>
|
<h5>{item.title}</h5>
|
||||||
</div>
|
</div>
|
||||||
<div className="item__bottom">
|
<div className="item__bottom">
|
||||||
<p>{item.subtitle}</p>
|
<p>{item.subtitle}</p>
|
||||||
<div className="arrow">
|
<div className="arrow">
|
||||||
<img src={rightArrow} alt='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>
|
||||||
|
Loading…
Reference in New Issue
Block a user