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 { 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>