catalogSpecialists

This commit is contained in:
Mikola 2024-02-01 23:14:29 +03:00
parent 0acbef4195
commit f07589217a
7 changed files with 199 additions and 27 deletions

View File

@ -101,6 +101,21 @@
line-height: 32px; line-height: 32px;
color: white; color: white;
height: 45px; height: 45px;
@media (max-width: 900px) {
max-width: 185px;
}
@media (max-width: 450px) {
width: 100%;
max-width: none;
margin-right: 0;
}
}
@media (max-width: 450px) {
flex-direction: column;
row-gap: 10px;
} }
} }
@ -139,6 +154,11 @@
transform: scale(1.03); transform: scale(1.03);
color: white; color: white;
} }
@media (max-width: 450px) {
width: 100%;
max-width: none;
}
} }
&__img { &__img {

View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom";
import close from "assets/icons/closeProjectPersons.svg"; import close from "assets/icons/closeProjectPersons.svg";
import "./modalTrackerRegistration.scss"; import "./modalTrackerRegistration.scss";
@ -16,12 +17,13 @@ export const ModalTrackerRegistration = ({ setModalReset, email }) => {
для активации вашего аккаунта на почту для активации вашего аккаунта на почту
<br /> <span>{email}</span> <br /> <span>{email}</span>
</p> </p>
<button <Link
to={'/registration-setting'}
onClick={() => setModalReset(false)} onClick={() => setModalReset(false)}
className="modalConfirmTracker__btn" className="modalConfirmTracker__btn"
> >
Понятно Понятно
</button> </Link>
<img <img
onClick={() => setModalReset(false)} onClick={() => setModalReset(false)}
src={close} src={close}

View File

@ -0,0 +1,28 @@
import React from "react";
import { Link } from "react-router-dom";
import { urlForLocal } from "@utils/helper";
import rightArrow from "assets/icons/arrows/arrowRight.svg";
import "./partnerPersonCard.scss";
export const PartnerPersonCard = ({name, img, userId}) => {
return (
<div className="partnerPersonCard">
<div className="partnerPersonCard__img">
<img src={urlForLocal(img)} alt='avatar' />
</div>
<div className="partnerPersonCard__info">
<h2 className="partnerPersonCard__name">{name}</h2>
<Link className="partnerPersonCard__report" to={`calendar/${userId}`}>
Подробный отчет
<div className="partnerPersonCard__more">
<img src={rightArrow} alt='arrow' />
</div>
</Link>
</div>
</div>
);
};
export default PartnerPersonCard;

View File

@ -0,0 +1,45 @@
.partnerPersonCard {
display: flex;
position: relative;
&__img {
background: white;
border-radius: 12px;
padding: 25px;
z-index: 2;
img {
width: 77px;
height: 77px;
}
}
&__info {
position: relative;
background: #E1FCCF;
z-index: 1;
padding: 15px 15px 15px 30px;
left: -15px;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
&__report {
display: flex;
column-gap: 10px;
color: black;
font-size: 16px;
align-items: center;
}
&__more {
width: 41px;
height: 41px;
background: white;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
}

View File

@ -14,6 +14,7 @@
&__items { &__items {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap;
//flex-wrap: wrap; //flex-wrap: wrap;
//margin-top: 25px; //margin-top: 25px;
//row-gap: 24px; //row-gap: 24px;

View File

@ -5,6 +5,9 @@ import { Footer } from "@components/Common/Footer/Footer";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout"; import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration"; import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
import SideBar from "@components/SideBar/SideBar"; import SideBar from "@components/SideBar/SideBar";
import { useFormValidation } from "@hooks/useFormValidation";
import { useNotification } from "@hooks/useNotification";
import { Navigate } from "react-router-dom";
import arrowInfo from "assets/icons/trackerIntroInfo.svg"; import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png"; import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
@ -14,9 +17,42 @@ import "./trackerRegistration.scss";
export const TrackerRegistration = () => { export const TrackerRegistration = () => {
const [modalConfirmOpen, setModalConfirm] = useState(false); const [modalConfirmOpen, setModalConfirm] = useState(false);
const [inputs, setInputs] = useState({ const fields = {
email: "" username: "",
}); email: "",
password: "",
secondPassword: ""
};
const apiEndpoint = "/register/sign-up";
const { showNotification } = useNotification();
const showNotificationError = () => {
showNotification({
show: true,
text: "Аккаунт с таким логином или email уже существует",
type: "error"
});
};
const showNotificationTrue = () => {
showNotification({
show: true,
text: "Аккаунт успешно создан",
type: "success"
});
};
const {
formData,
validationErrors,
handleChange,
handleSubmit,
} = useFormValidation(
apiEndpoint,
fields,
showNotificationError,
showNotificationTrue,
);
return ( return (
<div className="tracker-registration"> <div className="tracker-registration">
@ -34,33 +70,64 @@ export const TrackerRegistration = () => {
<div className="tracker-registration__form"> <div className="tracker-registration__form">
<div className="tracker-registration__form__inputs"> <div className="tracker-registration__form__inputs">
<div className="tracker-registration__inputContainer"> <div className="tracker-registration__inputContainer">
<span>Ваше имя</span> <h5>Ваше имя</h5>
<input placeholder="Имя" />
</div>
<div className="tracker-registration__inputContainer">
<span>Ваш e-mail</span>
<input <input
placeholder="E-mail" placeholder="Имя"
onChange={(e) => className={validationErrors.username ? "error" : ""}
setInputs((prevState) => ({ onChange={handleChange}
...prevState, value={formData.username}
email: e.target.value id="username"
}))
}
type="email"
/> />
<span>{validationErrors.username}</span>
</div> </div>
<div className="tracker-registration__inputContainer"> <div className="tracker-registration__inputContainer">
<span>Придумайте пароль</span> <h5>Ваш e-mail</h5>
<input placeholder="Пароль" /> <input
onChange={handleChange}
className={validationErrors.email ? "error" : ""}
placeholder="E-mail"
type="email"
id="email"
value={formData.email}
/>
<span>{validationErrors.email}</span>
</div> </div>
<div className="tracker-registration__inputContainer"> <div className="tracker-registration__inputContainer">
<span>Повторите пароль</span> <h5>Придумайте пароль</h5>
<input placeholder="Повторите пароль" /> <input
placeholder="Пароль"
className={validationErrors.password ? "error" : ""}
onChange={handleChange}
value={formData.password}
type="password"
id="password"
/>
<span>{validationErrors.password}</span>
</div>
<div className="tracker-registration__inputContainer">
<h5>Повторите пароль</h5>
<input
placeholder="Повторите пароль"
className={validationErrors.secondPassword ? "error" : ""}
value={formData.secondPassword}
type="password"
onChange={handleChange}
id="secondPassword"
/>
<span>{validationErrors.secondPassword}</span>
</div> </div>
</div> </div>
<div className="tracker-registration__form__submit"> <div className="tracker-registration__form__submit">
<button onClick={() => setModalConfirm(true)}>Отправить</button> <button
onClick={async (e) => {
e.preventDefault();
const result = await handleSubmit(e);
if (result === true) {
setModalConfirm(true)
}
}}
>
Отправить</button>
<div className="tracker-registration__form__info"> <div className="tracker-registration__form__info">
<img src={authImg} alt="img" /> <img src={authImg} alt="img" />
<p> <p>
@ -80,7 +147,7 @@ export const TrackerRegistration = () => {
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}> <ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
<ModalTrackerRegistration <ModalTrackerRegistration
setModalReset={setModalConfirm} setModalReset={setModalConfirm}
email={inputs.email} email={formData.email}
/> />
</ModalLayout> </ModalLayout>
)} )}

View File

@ -41,6 +41,7 @@
&__submit { &__submit {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 5px;
button { button {
border-radius: 44px; border-radius: 44px;
@ -106,15 +107,18 @@
&__inputContainer { &__inputContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 15px;
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
margin-bottom: 44px; margin-bottom: 44px;
h5 {
font-size: 15px;
}
span { span {
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 12px;
color: #000; color: red;
} }
input { input {
@ -122,6 +126,7 @@
padding: 8px 12px 9px; padding: 8px 12px 9px;
background-color: #EFF2F7; background-color: #EFF2F7;
border-radius: 8px; border-radius: 8px;
margin: 10px 0;
border: none; border: none;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
@ -132,5 +137,9 @@
margin-bottom: 0; margin-bottom: 0;
max-width: none; max-width: none;
} }
.error {
border: 1px solid red;
}
} }
} }