registration setting
This commit is contained in:
Mikola
parent
d8e34980f2
commit
d5f6f5ba60
@ -1,68 +1,74 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
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 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 = () => {
|
||||
|
||||
const questions = {
|
||||
countPeople: ['Только я', '2-5', '6-12', '13-40', 'более 50', 'более 100'],
|
||||
role: ['Лидер команды', 'Член команды', 'Менеджер', 'Программист', 'Владелец бизнеса'],
|
||||
countPeople: ["Только я", "2-5", "6-12", "13-40", "более 50", "более 100"],
|
||||
role: [
|
||||
"Лидер команды",
|
||||
"Член команды",
|
||||
"Менеджер",
|
||||
"Программист",
|
||||
"Владелец бизнеса"
|
||||
],
|
||||
environment: [
|
||||
{
|
||||
title: 'Задачи и трекер',
|
||||
subtitle: 'Сервис управления проектами и задачами',
|
||||
icon: tasks,
|
||||
title: "Задачи и трекер",
|
||||
subtitle: "Сервис управления проектами и задачами",
|
||||
icon: tasks
|
||||
},
|
||||
{
|
||||
title: 'Моя команда',
|
||||
subtitle: 'Данные вашего персонала',
|
||||
icon: myTeam,
|
||||
title: "Моя команда",
|
||||
subtitle: "Данные вашего персонала",
|
||||
icon: myTeam
|
||||
},
|
||||
{
|
||||
title: 'Тестирование ',
|
||||
subtitle: 'Сотрудники для вашего сервиса',
|
||||
icon: qa,
|
||||
title: "Тестирование ",
|
||||
subtitle: "Сотрудники для вашего сервиса",
|
||||
icon: qa
|
||||
},
|
||||
{
|
||||
title: 'Гит',
|
||||
subtitle: 'ПО для хостинга IT-проектов и совместной разработки на базе Git',
|
||||
icon: git,
|
||||
title: "Гит",
|
||||
subtitle:
|
||||
"ПО для хостинга IT-проектов и совместной разработки на базе Git",
|
||||
icon: git
|
||||
},
|
||||
{
|
||||
title: 'Аутстафинг',
|
||||
subtitle: 'Каталог IT специалистов',
|
||||
icon: outstaffing,
|
||||
title: "Аутстафинг",
|
||||
subtitle: "Каталог IT специалистов",
|
||||
icon: outstaffing
|
||||
},
|
||||
{
|
||||
title: 'Курсы IT ',
|
||||
subtitle: 'Обучайтесь сами обучайте персонал',
|
||||
icon: curse,
|
||||
title: "Курсы IT ",
|
||||
subtitle: "Обучайтесь сами обучайте персонал",
|
||||
icon: curse
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const [selectedOptions, setSelectedOptions] = useState({
|
||||
countPeople: '',
|
||||
role: ''
|
||||
})
|
||||
countPeople: "",
|
||||
role: ""
|
||||
});
|
||||
|
||||
const [selectedEnvironment, setSelectedEnvironment] = useState([])
|
||||
const [selectedEnvironment, setSelectedEnvironment] = useState([]);
|
||||
|
||||
const [step, setStep] = useState(1)
|
||||
const [step, setStep] = useState(1);
|
||||
|
||||
return (
|
||||
<div className="registrationSetting">
|
||||
@ -71,7 +77,7 @@ export const RegistrationSetting = () => {
|
||||
<div className="registrationSetting__content">
|
||||
<div className="container">
|
||||
<h1 className="registrationSetting__title">
|
||||
Добро пожаловать {" "}
|
||||
Добро пожаловать{" "}
|
||||
<span>
|
||||
в ITGuild
|
||||
<img src={arrowInfo} alt="arrow" />
|
||||
@ -93,15 +99,23 @@ export const RegistrationSetting = () => {
|
||||
</h3>
|
||||
<div className="questionBlock__answers">
|
||||
{questions.countPeople.map((item, index) => {
|
||||
return <button
|
||||
onClick={() => setSelectedOptions((prevState) => ({...prevState, countPeople: item}))}
|
||||
key={index}
|
||||
className={item === selectedOptions.countPeople ? 'active' : ''}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
})
|
||||
}
|
||||
return (
|
||||
<button
|
||||
onClick={() =>
|
||||
setSelectedOptions((prevState) => ({
|
||||
...prevState,
|
||||
countPeople: item
|
||||
}))
|
||||
}
|
||||
key={index}
|
||||
className={
|
||||
item === selectedOptions.countPeople ? "active" : ""
|
||||
}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<img
|
||||
className="registrationSetting__question__img"
|
||||
@ -109,73 +123,94 @@ export const RegistrationSetting = () => {
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
{step >= 2 &&
|
||||
{step >= 2 && (
|
||||
<div className="registrationSetting__question questionBlock">
|
||||
<h3 className="questionBlock__question">
|
||||
Какая у тебя роль?
|
||||
</h3>
|
||||
<h3 className="questionBlock__question">Какая у тебя роль?</h3>
|
||||
<div className="questionBlock__answers">
|
||||
{questions.role.map((item, index) => {
|
||||
return <button
|
||||
onClick={() => setSelectedOptions((prevState) => ({...prevState, role: item}))}
|
||||
key={index}
|
||||
className={item === selectedOptions.role ? 'active' : ''}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
})
|
||||
}
|
||||
return (
|
||||
<button
|
||||
onClick={() =>
|
||||
setSelectedOptions((prevState) => ({
|
||||
...prevState,
|
||||
role: item
|
||||
}))
|
||||
}
|
||||
key={index}
|
||||
className={item === selectedOptions.role ? "active" : ""}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{step >= 3 &&
|
||||
)}
|
||||
{step >= 3 && (
|
||||
<div className="registrationSetting__environment environment">
|
||||
<span className="environment__suptitle">Организуй комфортную среду для продуктивности</span>
|
||||
<h3 className="environment__title">Добавь сервисы для своего рабочего пространства</h3>
|
||||
<span className="environment__suptitle">
|
||||
Организуй комфортную среду для продуктивности
|
||||
</span>
|
||||
<h3 className="environment__title">
|
||||
Добавь сервисы для своего рабочего пространства
|
||||
</h3>
|
||||
<div className="environment__items">
|
||||
{questions.environment.map((item, index) => {
|
||||
return <div
|
||||
className={selectedEnvironment.includes(item.title) ? "environment__item item item--active" : "environment__item item" }
|
||||
key={index}
|
||||
onClick={() => {
|
||||
if (selectedEnvironment.includes(item.title)) {
|
||||
setSelectedEnvironment((prevState) => prevState.filter((name) => name !== item.title))
|
||||
} else {
|
||||
setSelectedEnvironment((prevState) => [...prevState, item.title])
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
selectedEnvironment.includes(item.title)
|
||||
? "environment__item item item--active"
|
||||
: "environment__item item"
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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' />
|
||||
key={index}
|
||||
onClick={() => {
|
||||
if (selectedEnvironment.includes(item.title)) {
|
||||
setSelectedEnvironment((prevState) =>
|
||||
prevState.filter((name) => name !== item.title)
|
||||
);
|
||||
} else {
|
||||
setSelectedEnvironment((prevState) => [
|
||||
...prevState,
|
||||
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>
|
||||
<button className="registrationSetting__continue registrationSetting__done">Готово</button>
|
||||
<button className="registrationSetting__continue registrationSetting__done">
|
||||
Готово
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
{step !== 3 &&
|
||||
)}
|
||||
{step !== 3 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
if (step === 1 && selectedOptions.countPeople) {
|
||||
setStep((prevState) => prevState + 1)
|
||||
setStep((prevState) => prevState + 1);
|
||||
}
|
||||
if (step === 2 && selectedOptions.role) {
|
||||
setStep((prevState) => prevState + 1)
|
||||
setStep((prevState) => prevState + 1);
|
||||
}
|
||||
}}
|
||||
className="registrationSetting__continue">
|
||||
className="registrationSetting__continue"
|
||||
>
|
||||
Продолжить
|
||||
</button>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user