cd 4
This commit is contained in:
VividTruthKeeper
parent
eab4433290
commit
b8e46b43fc
|
|
@ -2,8 +2,6 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
|
||||
// IMPORT VALIDATORS
|
||||
import { ValidateEmail } from "../../validators/ValidateEmail";
|
||||
import { ValidatePhoneNumber } from "../../validators/ValidatePhoneNumber";
|
||||
import { getDate } from "../../helpers/Date";
|
||||
|
||||
// IMPORT IMAGES
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState } from "react";
|
||||
|
||||
// IMPORT COMPONENTS
|
||||
import CustomSelect from "../global/CustomSelect";
|
||||
|
||||
// IMPORT IMAGES
|
||||
import remove from "../../icons/remove.svg";
|
||||
|
||||
const CardStage4 = ({ setStage }) => {
|
||||
const [files, setFiles] = useState([]);
|
||||
const [inputNumber, setInputNumber] = useState([""]);
|
||||
return (
|
||||
<section className="card-stage-4">
|
||||
<form>
|
||||
<div className="cd-top-4">
|
||||
<h2>
|
||||
Для оформления заявки на получения кредита загрузите требуемые
|
||||
документы.
|
||||
</h2>
|
||||
<CustomSelect
|
||||
items={[
|
||||
"Требования и документы",
|
||||
"Lorem, ipsum dolor.",
|
||||
"Lorem, ipsum dolor.",
|
||||
]}
|
||||
placeholder={"Выберите тип документа"}
|
||||
name={"doc-type"}
|
||||
stateSetter={() => null}
|
||||
customId={"doc-type"}
|
||||
blockName={"cd-4-custom"}
|
||||
elName={"cd-4-custom-el"}
|
||||
/>
|
||||
</div>
|
||||
<div className="cd-middle-4">
|
||||
<button type="button">Загрузить файл</button>
|
||||
{inputNumber.map((el, i) => {
|
||||
return (
|
||||
<input
|
||||
key={i}
|
||||
type="file"
|
||||
onChange={(e) => {
|
||||
setInputNumber([...inputNumber, ""]);
|
||||
if (!files.includes(e.target.value)) {
|
||||
setFiles([...files, e.target.files]);
|
||||
}
|
||||
console.log(files);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="cd-bottom-4">
|
||||
{files.map((el, i) => {
|
||||
return (
|
||||
<div key={i} className="file">
|
||||
<p>{el[0].name}</p>
|
||||
<div
|
||||
className="remove"
|
||||
onClick={() => {
|
||||
setFiles(
|
||||
files.filter((item) => {
|
||||
return item !== el;
|
||||
})
|
||||
);
|
||||
}}
|
||||
>
|
||||
<img src={remove} alt="remove" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardStage4;
|
||||
|
|
@ -15,6 +15,7 @@ import { ReactComponent as Lines } from "../../icons/lines.svg";
|
|||
import CardStage1 from "../CardStages/CardStage1";
|
||||
import CardStage2 from "../CardStages/CardStage2";
|
||||
import CardStage3 from "../CardStages/CardStage3";
|
||||
import CardStage4 from "../CardStages/CardStage4";
|
||||
|
||||
const ModalForm = ({ modalOpen, setModalOpen, stage, setStage }) => {
|
||||
return (
|
||||
|
|
@ -89,6 +90,8 @@ const ModalForm = ({ modalOpen, setModalOpen, stage, setStage }) => {
|
|||
<CardStage2 setStage={setStage} />
|
||||
) : stage === 3 ? (
|
||||
<CardStage3 setStage={setStage} />
|
||||
) : stage === 4 ? (
|
||||
<CardStage4 setStage={setStage} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 18C4.03535 18 0 13.9647 0 9C0 4.03535 4.03535 0 9 0C13.9647 0 18 4.03535 18 9C18 13.9647 13.9647 18 9 18ZM9 1.25581C4.73023 1.25581 1.25581 4.73023 1.25581 9C1.25581 13.2698 4.73023 16.7442 9 16.7442C13.2698 16.7442 16.7442 13.2698 16.7442 9C16.7442 4.73023 13.2698 1.25581 9 1.25581Z" fill="#01815E"/>
|
||||
<path d="M6.6307 11.9972C6.47163 11.9972 6.31256 11.9386 6.18698 11.813C5.94419 11.5702 5.94419 11.1684 6.18698 10.9256L10.9256 6.18698C11.1684 5.94419 11.5702 5.94419 11.813 6.18698C12.0558 6.42977 12.0558 6.83163 11.813 7.07442L7.07442 11.813C6.95721 11.9386 6.78977 11.9972 6.6307 11.9972Z" fill="#01815E"/>
|
||||
<path d="M11.3693 11.9972C11.2102 11.9972 11.0512 11.9386 10.9256 11.813L6.18698 7.07442C5.94419 6.83163 5.94419 6.42977 6.18698 6.18698C6.42977 5.94419 6.83163 5.94419 7.07442 6.18698L11.813 10.9256C12.0558 11.1684 12.0558 11.5702 11.813 11.813C11.6874 11.9386 11.5284 11.9972 11.3693 11.9972Z" fill="#01815E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -301,3 +301,77 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-stage-4 {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-top-4 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-middle-4 {
|
||||
position: relative;
|
||||
input {
|
||||
opacity: 0;
|
||||
height: 5rem;
|
||||
cursor: pointer;
|
||||
width: 16.2rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0.5rem;
|
||||
border: 0.1rem solid $base-green;
|
||||
background: transparent;
|
||||
color: $base-green;
|
||||
padding: 1.4rem 2rem;
|
||||
height: 5rem;
|
||||
width: 16.2rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-bottom-4 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.file {
|
||||
display: flex;
|
||||
padding: 1.4rem 1.6rem 1.4rem 3rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 0.1rem solid #e5e5e5;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
p {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue