Added styles in modal

src/components/UI/ModalTiket/ModalTiket.js

@@ -1,7 +1,21 @@
-import React from "react";
+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: "Василий Тарасов",
+  });
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -11,9 +25,25 @@ export const ModalTiket = ({ active, setActive }) => {
         className="modal-tiket__content"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="colum author"></div>
-        <div className="colum content"></div>
-        <div className="colum workers"></div>
+        <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>
+            <h4>{tiket.code}</h4>
+            <div></div>
+          </div>
+        </div>
+        <div className="workers">workers</div>
       </div>
     </div>
   );

src/components/UI/ModalTiket/ModalTiket.scss

@@ -10,16 +10,6 @@
   align-items: center;
   justify-content: center;
   transform: scale(0);
-
-  .colum {
-    .author {
-    }
-    .content {
-    }
-
-    .workers {
-    }
-  }
 }
 
 .modal-tiket.active {
@@ -27,10 +17,45 @@
 }
 
 .modal-tiket__content {
-  padding: 20px;
-  width: 700px;
-  height: 400px;
+  height: 500px;
   background: #ffffff;
   border: 1px solid #dde2e4;
   border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+
+  .author {
+    padding: 25px 0 0 0;
+    border-radius: 8px 0 0 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 76px;
+    background: #fbfbfb;
+
+    a {
+      margin-bottom: 16px;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    width: 600px;
+
+    .title-project {
+      font-family: "LabGrotesque", sans-serif;
+      margin: 26px 0 0 21px;
+      font-weight: 700;
+      font-size: 16px;
+
+      &__category {
+        margin-right: 17px;
+      }
+    }
+  }
+
+  .workers {
+    width: 300px;
+  }
 }

tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5", // компилируем ts код в js код версии ES5
-    "module": "esnext",
-    // для поддержки динамического импорта модулей
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react"
-  }
-}