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

partner request design

Browse Source
This commit is contained in:
Mikola 2024-05-03 19:23:15 +03:00
parent a7c58b2609
commit a763c5a69a
2 changed files with 335 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/pages/PartnerAddRequest/PartnerAddRequest.jsx
View File

@ -34,17 +34,20 @@ export const PartnerAddRequest = () => {
const [specializationList, setSpecializationList] = useState([]);
const [levelList, setLevelList] = useState([]);
const [countList] = useState([1, 2, 3, 4, 5]);
const [locationList] = useState(['РФ', 'Беларусь']);
const [openSkillsSelect, setOpenSkillsSelect] = useState(false);
const [openSpecializationList, setOpenSpecializationListOpen] =
useState(false);
const [openLevelList, setOpenLevelList] = useState(false);
const [openCountList, setOpenCountList] = useState(false);
const [openLocationList, setOpenLocationList] = useState(false);
const [editRequest, setEditRequest] = useState(false);
const [selectedSkills, setSelectedSkills] = useState([]);
const [selectedSpecialization, setSelectedSpecialization] = useState(
"Выберите специализацию"
);
const [selectedLevel, setSelectedLevel] = useState("Выберите уровень");
const [selectedLocation, setSelectedLocation] = useState("Выберите локацию");
const [selectedCount, setSelectedCount] = useState(
"Выберите кол-во сотрудников"
);
@ -177,6 +180,7 @@ export const PartnerAddRequest = () => {
setOpenSpecializationListOpen(false);
setOpenLevelList(false);
setOpenCountList(false);
setOpenLocationList(false);
}
};
@ -202,6 +206,7 @@ export const PartnerAddRequest = () => {
? "Страница редактирования заявки"
: "Страница добавления заявки"}
</h2>
<div className="partner-add-request__main">
<div className="partner-add-request__section">
<div className="partner-add-request__form">
<div className="partner-add-request__form__block form__block">
@ -417,21 +422,6 @@ export const PartnerAddRequest = () => {
</div>
)}
</div>
<div className="form__block__buttons">
<Link to="/profile/requests" className="form__block__cancel">
Отмена
</Link>
<button
onClick={() => handler()}
className={
disableBtn()
? "form__block__save"
: "form__block__save disable"
}
>
Сохранить
</button>
</div>
</div>
</div>
<div className="partner-add-request__info">
@ -480,6 +470,68 @@ export const PartnerAddRequest = () => {
</div>
</div>
</div>
<div className="partner-add-request__special">
<h4>Основные требования по вакансии</h4>
<div className="form__block__section special__select">
<h3>Локация</h3>
<div
className="form__block__section__select"
onClick={() => setOpenLocationList(true)}
>
<span>{selectedLocation}</span>
<img
className={openLocationList ? "rotate" : ""}
src={arrowDown}
/>
</div>
{openLocationList && (
<div className="form__block__dropDown">
{locationList.map((location, index) => {
return (
<p
key={index}
onClick={() => {
setOpenLocationList(false);
setSelectedLocation(location);
}}
>
{location}
</p>
);
})}
</div>
)}
</div>
<div className="form__block__section">
<h3>Ставка</h3>
<div className="form__block__section__input special__select">
<input
type="text"
placeholder="Оплата"
/>
</div>
</div>
<div className="form__block__buttons">
<Link to="/profile/requests" className="form__block__cancel">
Отмена
</Link>
<button
onClick={() => handler()}
className={
disableBtn()
? "form__block__save"
: "form__block__save disable"
}
>
Сохранить
</button>
<p>
Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
использования персональных данных
</p>
</div>
</div>
</div>
</div>
<Footer />
</div>

40
src/pages/PartnerAddRequest/partnerAddRequest.scss
View File

@ -23,6 +23,31 @@
line-height: 32px;
}
&__main {
display: flex;
flex-direction: column;
row-gap: 30px;
}
&__special {
background: rgba(255, 255, 255, 1);
border-radius: 12px;
padding: 41px 45px 35px 55px;
display: flex;
flex-direction: column;
h4 {
font-weight: 700;
color: rgba(91, 104, 113, 1);
font-size: 20px;
line-height: 24px;
}
.special__select {
max-width: 450px;
}
}
&__section {
margin-top: 25px;
display: flex;
@ -99,6 +124,7 @@
font-size: 15px;
line-height: 18px;
outline: none;
width: 100%;
}
}
@ -164,13 +190,23 @@
&__buttons {
display: flex;
margin-top: 50px;
button {
max-width: 150px;
width: 100%;
height: 40px;
}
p {
font-weight: 300;
font-size: 12px;
line-height: 18px;
color: rgba(0, 0, 0, 1);
margin-left: 50px;
max-width: 360px;
display: flex;
align-items: center;
}
}
&__cancel {
@ -321,7 +357,7 @@
background: #ffffff;
border-radius: 12px;
width: 100%;
padding: 74px 48px 136px 62px;
padding: 74px 48px 67px 62px;
display: flex;
flex-direction: column;
row-gap: 61px;