Modal - 90%

src/components/UI/ModalTiket/ModalTiket.js

@@ -14,8 +14,21 @@ export const ModalTiket = ({ active, setActive }) => {
     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"}
@@ -41,25 +54,44 @@ export const ModalTiket = ({ active, setActive }) => {
           <div className="content__task">
             <h5>{tiket.code}</h5>
             <div className="content__description">
-              <p>
+              <p>{tiket.descriptions}</p>
-                На многих страницах сайта отсутствуют или некорректно заполнены
+              <img src={task} className="image-task"></img>
-                метатеги Description. Это может негативно повлиять на
+              <p>{tiket.descriptions}</p>
-                представление сайта в результатах поиска.Необходимо исправить
+            </div>
-                все страницы где есть ошибки или отсутствует Title и
+            <div className="content__communication">
-                Description.
+              <p className="comment">
+                <img src={comments}></img>
+                <span>{0}</span>
+                Коментариев
               </p>
-              <img src={task}></img>
+              <p className="file">
-              <p>
+                <img src={files}></img>
-                На многих страницах сайта отсутствуют или некорректно заполнены
+                <span>{0}</span>
-                метатеги Description. Это может негативно повлиять на
+                Файлов
-                представление сайта в результатах поиска.Необходимо исправить
-                все страницы где есть ошибки или отсутствует Title и
-                Description.
               </p>
             </div>
           </div>
         </div>
-        <div className="workers">workers</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>
   );

src/components/UI/ModalTiket/ModalTiket.scss

@@ -56,6 +56,18 @@
     }
 
     &__task {
+      margin-top: 22px;
+      padding: 18px;
+
+      h5 {
+        font-family: "Inter", sans-serif;
+        font-weight: 500;
+        font-style: normal;
+        font-size: 16px;
+        line-height: 24px;
+
+        color: #1a1919;
+      }
     }
 
     &__description {
@@ -64,11 +76,69 @@
         font-size: 14px;
         line-height: 140%;
         color: #252c32;
+        text-align: justify;
+      }
+
+      .image-task {
+        margin: 0 0 20px 0;
+      }
+    }
+
+    &__communication {
+      display: flex;
+      flex-direction: row;
+      margin: 29px 0 0 -5px;
+
+      .comment {
+        width: 100px;
+        justify-content: space-evenly;
+      }
+
+      .comment,
+      .file {
+        display: flex;
+        align-items: center;
+      }
+
+      .file {
+        justify-content: space-between;
+        margin-left: 20px;
+        width: 70px;
       }
     }
   }
 
   .workers {
+    border-left: 1px solid #f1f1f1;
     width: 300px;
+    padding: 40px;
+
+    span {
+      font-family: "Inter", sans-serif;
+      font-weight: 500;
+      font-size: 11px;
+
+      color: #807777;
+    }
+
+    &__creator {
+      font-size: 14px;
+      line-height: 32px;
+      font-weight: 500;
+      color: #2d4a17;
+    }
+
+    .worker {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 15px;
+
+      p {
+        margin: 0 0 0 11px;
+        font-size: 12px;
+        color: #807777;
+      }
+    }
   }
 }