101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
import React, { useState } from "react";
|
||
import "./ModalTiket.scss";
|
||
|
||
import creatorMock from "../../../images/avatarMoсkCreator.png";
|
||
import avatarMock1 from "../../../images/avatarMoсk1.png";
|
||
import avatarMock2 from "../../../images/avatarMoсk2.png";
|
||
import category from "../../../images/category.png";
|
||
import comments from "../../../images/comments.png";
|
||
import files from "../../../images/files.png";
|
||
import task from "../../../images/tasksMock.png";
|
||
|
||
export const ModalTiket = ({ active, setActive }) => {
|
||
const [tiket] = useState({
|
||
name: "Разработка трекера",
|
||
code: "PR - 2245",
|
||
creator: "Василий Тарасов",
|
||
descriptions:
|
||
"На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска.Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.",
|
||
});
|
||
|
||
const [workers] = useState([
|
||
{
|
||
name: "Дмитрий Рогов",
|
||
avatar: avatarMock2,
|
||
},
|
||
{
|
||
name: "Марина Серова",
|
||
avatar: avatarMock1,
|
||
},
|
||
]);
|
||
|
||
return (
|
||
<div
|
||
className={active ? "modal-tiket active" : "modal-tiket"}
|
||
onClick={() => setActive(false)}
|
||
>
|
||
<div
|
||
className="modal-tiket__content"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="author">
|
||
<a href="#">
|
||
<img src={creatorMock}></img>
|
||
</a>
|
||
<a href="#">
|
||
<img src={creatorMock}></img>
|
||
</a>
|
||
</div>
|
||
<div className="content">
|
||
<h3 className="title-project">
|
||
<img src={category} className="title-project__category"></img>
|
||
Проект: {tiket.name}
|
||
</h3>
|
||
<div className="content__task">
|
||
<h5>{tiket.code}</h5>
|
||
<div className="content__description">
|
||
<p>{tiket.descriptions}</p>
|
||
<img src={task} className="image-task"></img>
|
||
<p>{tiket.descriptions}</p>
|
||
</div>
|
||
<div className="content__communication">
|
||
<p className="comment">
|
||
<img src={comments}></img>
|
||
<span>{0}</span>
|
||
Коментариев
|
||
</p>
|
||
<p className="file">
|
||
<img src={files}></img>
|
||
<span>{0}</span>
|
||
Файлов
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="workers">
|
||
<span>{tiket.code}</span>
|
||
<p className="workers__creator">Создатель : {tiket.creator}</p>
|
||
<div>
|
||
{workers.map((worker) => {
|
||
return (
|
||
<div className="worker">
|
||
<img src={worker.avatar}></img>
|
||
<p>{worker.name}</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div>
|
||
<button>+</button>
|
||
<span>Добавить участников</span>
|
||
</div>
|
||
<div></div>
|
||
<button>Начать делать</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ModalTiket;
|