registration setting
This commit is contained in:
Mikola
184
src/pages/RegistrationSetting/RegistrationSetting.js
Normal file
184
src/pages/RegistrationSetting/RegistrationSetting.js
Normal file
@ -0,0 +1,184 @@
|
||||
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 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"
|
||||
|
||||
export const RegistrationSetting = () => {
|
||||
|
||||
const questions = {
|
||||
countPeople: ['Только я', '2-5', '6-12', '13-40', 'более 50', 'более 100'],
|
||||
role: ['Лидер команды', 'Член команды', 'Менеджер', 'Программист', 'Владелец бизнеса'],
|
||||
environment: [
|
||||
{
|
||||
title: 'Задачи и трекер',
|
||||
subtitle: 'Сервис управления проектами и задачами',
|
||||
icon: tasks,
|
||||
},
|
||||
{
|
||||
title: 'Моя команда',
|
||||
subtitle: 'Данные вашего персонала',
|
||||
icon: myTeam,
|
||||
},
|
||||
{
|
||||
title: 'Тестирование ',
|
||||
subtitle: 'Сотрудники для вашего сервиса',
|
||||
icon: qa,
|
||||
},
|
||||
{
|
||||
title: 'Гит',
|
||||
subtitle: 'ПО для хостинга IT-проектов и совместной разработки на базе Git',
|
||||
icon: git,
|
||||
},
|
||||
{
|
||||
title: 'Аутстафинг',
|
||||
subtitle: 'Каталог IT специалистов',
|
||||
icon: outstaffing,
|
||||
},
|
||||
{
|
||||
title: 'Курсы IT ',
|
||||
subtitle: 'Обучайтесь сами обучайте персонал',
|
||||
icon: curse,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const [selectedOptions, setSelectedOptions] = useState({
|
||||
countPeople: '',
|
||||
role: ''
|
||||
})
|
||||
|
||||
const [selectedEnvironment, setSelectedEnvironment] = useState([])
|
||||
|
||||
const [step, setStep] = useState(1)
|
||||
|
||||
return (
|
||||
<div className="registrationSetting">
|
||||
<AuthHeader />
|
||||
<SideBar />
|
||||
<div className="registrationSetting__content">
|
||||
<div className="container">
|
||||
<h1 className="registrationSetting__title">
|
||||
Добро пожаловать {" "}
|
||||
<span>
|
||||
в ITGuild
|
||||
<img src={arrowInfo} alt="arrow" />
|
||||
</span>
|
||||
</h1>
|
||||
<div className="registrationSetting__question questionBlock">
|
||||
<div className="questionBlock__head">
|
||||
<span className="questionBlock__suptitle">
|
||||
Эти ответы помогут сформировать кабинет
|
||||
</span>
|
||||
<div className="questionBlock__steps">
|
||||
<span className="active" />
|
||||
<span className={step >= 2 ? "active" : ""} />
|
||||
<span className={step >= 3 ? "active" : ""} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="questionBlock__question">
|
||||
Со сколькими людьми ты будешь работать?
|
||||
</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>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<img
|
||||
className="registrationSetting__question__img"
|
||||
src={registrationImg}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
{step >= 2 &&
|
||||
<div className="registrationSetting__question questionBlock">
|
||||
<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>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{step >= 3 &&
|
||||
<div className="registrationSetting__environment environment">
|
||||
<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])
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<button className="registrationSetting__continue registrationSetting__done">Готово</button>
|
||||
</div>
|
||||
}
|
||||
{step !== 3 &&
|
||||
<button
|
||||
onClick={() => {
|
||||
if (step === 1 && selectedOptions.countPeople) {
|
||||
setStep((prevState) => prevState + 1)
|
||||
}
|
||||
if (step === 2 && selectedOptions.role) {
|
||||
setStep((prevState) => prevState + 1)
|
||||
}
|
||||
}}
|
||||
className="registrationSetting__continue">
|
||||
Продолжить
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
226
src/pages/RegistrationSetting/registrationSetting.scss
Normal file
226
src/pages/RegistrationSetting/registrationSetting.scss
Normal file
@ -0,0 +1,226 @@
|
||||
.registrationSetting {
|
||||
&__content {
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
background-color: #f1f1f1;
|
||||
color: #000000;
|
||||
padding: 50px 0 0;
|
||||
min-height: 100vh;
|
||||
|
||||
@media (max-width: 1375px) {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 46px;
|
||||
color: #000000;
|
||||
span {
|
||||
color: #52B709;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
right: -85px;
|
||||
max-width: 280px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
max-width: 257px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 483px) {
|
||||
max-width: 160px;
|
||||
left: -175px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 24px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&__question {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 46.5px 75.5px 38px;
|
||||
position: relative;
|
||||
|
||||
&__img {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
right: 58px;
|
||||
}
|
||||
}
|
||||
|
||||
.questionBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 18px;
|
||||
&__head {
|
||||
display: flex;
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
|
||||
&__suptitle {
|
||||
color: #6F6F6F;
|
||||
font-size: 14px;
|
||||
margin-right: 70px;
|
||||
}
|
||||
|
||||
&__steps {
|
||||
display: flex;
|
||||
column-gap: 9px;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 75px;
|
||||
height: 6.5px;
|
||||
background: #B0BABF;
|
||||
border-radius: 77px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #6F6F6F;
|
||||
}
|
||||
}
|
||||
|
||||
&__question {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&__answers {
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
|
||||
button {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #8DC63F;
|
||||
padding: 4px 30px;
|
||||
line-height: 32px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #1458DD;
|
||||
color: whitesmoke;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__environment {
|
||||
margin-top: 13px;
|
||||
padding: 32px 20px 42px 44px;
|
||||
background: #E2EBEF;
|
||||
border-radius: 12px;
|
||||
|
||||
.environment {
|
||||
&__suptitle {
|
||||
font-size: 14px;
|
||||
color: #6F6F6F;
|
||||
margin-left: 31px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
margin: 24px 0 48px 31px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 19px;
|
||||
column-gap: 21px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
opacity: 0.6;
|
||||
background: white;
|
||||
padding: 35px 32px 26px 27.5px;
|
||||
border-radius: 12px;
|
||||
max-width: 341px;
|
||||
width: 100%;
|
||||
height: 181px;
|
||||
cursor: pointer;
|
||||
|
||||
.item {
|
||||
&__head {
|
||||
display: flex;
|
||||
column-gap: 19.5px;
|
||||
margin-bottom: 35px;
|
||||
img {
|
||||
max-width: 48px;
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
max-width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
display: flex;
|
||||
column-gap: 22.4px;
|
||||
|
||||
p {
|
||||
color: #6F6F6F;
|
||||
font-size: 12px;
|
||||
max-width: 189px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50px;
|
||||
background: #DDEEC6;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item--active {
|
||||
opacity: 1;
|
||||
border: 2px solid #1458DD;
|
||||
}
|
||||
|
||||
&__continue {
|
||||
margin: 6px 0 0 75.5px;
|
||||
background-color: #52B709;
|
||||
width: 174px;
|
||||
height: 46px;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding: 7px 33px;
|
||||
border: none;
|
||||
border-radius: 44px;
|
||||
}
|
||||
|
||||
&__done {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user