reset and confirm modals

This commit is contained in:
2023-07-18 16:20:55 +03:00
parent e0b289c3fd
commit fa582a8bfc
4 changed files with 106 additions and 85 deletions

View File

@ -1,11 +1,11 @@
import React, {useState} from "react";
import React, { useState } from "react";
import AuthBlock from "@components/AuthBlock/AuthBlock";
import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import {ModalReset} from "@components/Modal/ModalReset/ModalReset";
import { ModalReset } from "@components/Modal/ModalReset/ModalReset";
import SideBar from "@components/SideBar/SideBar";
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import trackerAuthImg from "assets/images/trackerAuthImg.png";
@ -13,7 +13,7 @@ import trackerAuthImg from "assets/images/trackerAuthImg.png";
import "./trackerAuth.scss";
export const TrackerAuth = () => {
const [modalResetOpen, setModalReset] = useState(false)
const [modalResetOpen, setModalReset] = useState(false);
return (
<div className="trackerAuth">
<AuthHeader />
@ -33,11 +33,11 @@ export const TrackerAuth = () => {
resetModal={setModalReset}
/>
</div>
{modalResetOpen &&
<ModalLayout active={modalResetOpen} setActive={setModalReset}>
<ModalReset setModalReset={setModalReset} />
</ModalLayout>
}
{modalResetOpen && (
<ModalLayout active={modalResetOpen} setActive={setModalReset}>
<ModalReset setModalReset={setModalReset} />
</ModalLayout>
)}
<Footer />
</div>
</div>

View File

@ -1,71 +1,76 @@
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 ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration";
import SideBar from "@components/SideBar/SideBar";
import { ModalTrackerRegistration } from "@components/Modal/ModalTrackerRegistration/ModalTrackerRegistration"
import arrowInfo from "assets/icons/trackerIntroInfo.svg";
import authImg from "assets/images/partnerProfile/authCandidateFormImg.png";
import registrationImg from "assets/images/trackerRegistrationImg.png"
import registrationImg from "assets/images/trackerRegistrationImg.png";
import "./trackerRegistration.scss";
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
export const TrackerRegistration = () => {
const [modalConfirmOpen, setModalConfirm] = useState(false)
const [modalConfirmOpen, setModalConfirm] = useState(false);
return (
<div className="trackerRegistration">
<AuthHeader />
<SideBar />
<div className="trackerAuth__content">
<div className="container">
<h1 className="trackerAuth__title">
Создайте свое{" "}
<span>
рабочее пространство
<img src={arrowInfo} alt="arrow" />
</span>
</h1>
<div className='trackerRegistration__form'>
<div className='trackerRegistration__form__inputs'>
<div className='trackerRegistration__inputContainer'>
<span>Ваше имя *</span>
<input placeholder='Имя' />
</div>
<div className='trackerRegistration__inputContainer'>
<span>Придумайте пароль*</span>
<input placeholder='Пароль' />
</div>
<div className='trackerRegistration__inputContainer'>
<span>Ваш email *</span>
<input placeholder='Email' type='email' />
</div>
<div className='trackerRegistration__inputContainer'>
<span>Повторите пароль*</span>
<input placeholder='Повторите пароль' />
</div>
</div>
<div className='trackerRegistration__form__submit'>
<button onClick={() => setModalConfirm(true)}>Отправить</button>
<div className='trackerRegistration__form__info'>
<img src={authImg} alt='img' />
<p>
Создавайте и редактируйте задачи и проекты вместе с другими участниками команды.
</p>
</div>
</div>
<img className='trackerRegistration__form__img' src={registrationImg} alt='img' />
</div>
</div>
{modalConfirmOpen &&
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
<ModalTrackerRegistration setModalReset={setModalConfirm} />
</ModalLayout>
}
<Footer />
return (
<div className="trackerRegistration">
<AuthHeader />
<SideBar />
<div className="trackerAuth__content">
<div className="container">
<h1 className="trackerAuth__title">
Создайте свое{" "}
<span>
рабочее пространство
<img src={arrowInfo} alt="arrow" />
</span>
</h1>
<div className="trackerRegistration__form">
<div className="trackerRegistration__form__inputs">
<div className="trackerRegistration__inputContainer">
<span>Ваше имя *</span>
<input placeholder="Имя" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Придумайте пароль*</span>
<input placeholder="Пароль" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Ваш email *</span>
<input placeholder="Email" type="email" />
</div>
<div className="trackerRegistration__inputContainer">
<span>Повторите пароль*</span>
<input placeholder="Повторите пароль" />
</div>
</div>
<div className="trackerRegistration__form__submit">
<button onClick={() => setModalConfirm(true)}>Отправить</button>
<div className="trackerRegistration__form__info">
<img src={authImg} alt="img" />
<p>
Создавайте и редактируйте задачи и проекты вместе с другими
участниками команды.
</p>
</div>
</div>
<img
className="trackerRegistration__form__img"
src={registrationImg}
alt="img"
/>
</div>
</div>
);
{modalConfirmOpen && (
<ModalLayout active={modalConfirmOpen} setActive={setModalConfirm}>
<ModalTrackerRegistration setModalReset={setModalConfirm} />
</ModalLayout>
)}
<Footer />
</div>
</div>
);
};