Finished project menu

src/components/ProjectTiket/ProjectTiket.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import ModalSettings from "../UI/ModalSettings/ModalSettings";
+
+import link from "../../images/link.svg";
+import archiveSet from "../../images/archive.svg";
+import del from "../../images/delete.svg";
+import edit from "../../images/edit.svg";
+
+import "./projectTiket.scss";
+
+export const ProjectTiket = ({ project, index, setOpenProject }) => {
+  const [modalSettings, setModalSettings] = useState(false);
+
+  useEffect(() => {
+    initListeners();
+  }, []);
+
+  function initListeners() {
+    document.addEventListener("click", closeByClickingOut);
+  }
+
+  function closeByClickingOut(event) {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+      event &&
+      !path.find((item) => item.classList && item.classList.contains("project"))
+    ) {
+      setModalSettings(false);
+    }
+  }
+
+  return (
+    <div className="project" key={index}>
+      <h3 onClick={() => setOpenProject(true)}>{project.name}</h3>
+      <div className="project__info">
+        <p>Открытые задачи</p>
+        <span className="count">{project.count}</span>
+        <span className="add">+</span>
+        <span className="menu-settings" onClick={() => setModalSettings(true)}>
+          ...
+        </span>
+      </div>
+
+      <ModalSettings active={modalSettings}>
+        <div className="project__settings-menu">
+          <div>
+            <img src={edit}></img>
+            <p>редактировать</p>
+          </div>
+          <div>
+            <img src={link}></img>
+            <p>ссылка на проект</p>
+          </div>
+          <div>
+            <img src={archiveSet}></img>
+            <p>в архив</p>
+          </div>
+          <div>
+            <img src={del}></img>
+            <p>удалить</p>
+          </div>
+        </div>
+      </ModalSettings>
+    </div>
+  );
+};
+
+export default ProjectTiket;

src/components/ProjectTiket/projectTiket.scss

@@ -0,0 +1,85 @@
+.project {
+  position: relative;
+  width: 48%;
+  background: #f1f1f1;
+  border-radius: 12px;
+  padding: 17px 26px 16px;
+  cursor: pointer;
+  max-width: 440px;
+
+  @media (max-width: 1068px) {
+    width: 47%;
+  }
+
+  @media (max-width: 785px) {
+    width: 100%;
+  }
+
+  @media (max-width: 430px) {
+    padding: 8px 13px 8px;
+  }
+
+  h3 {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 32px;
+    color: #111112;
+    margin-bottom: 10px;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    @media (max-width: 430px) {
+      justify-content: space-between;
+    }
+
+    p {
+      color: #6f6f6f;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 24px;
+      margin-bottom: 0;
+    }
+
+    .count {
+      margin-left: 8px;
+      width: 21px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #dddddd;
+      border-radius: 4px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 24px;
+      color: #6f6f6f;
+    }
+
+    .add {
+      color: #6f6f6f;
+      font-size: 17px;
+      margin: 0 25px 0 auto;
+
+      @media (max-width: 430px) {
+        display: none;
+      }
+    }
+
+    .menu-settings {
+      position: absolute;
+      font-size: 21px;
+      color: #6f6f6f;
+      right: 0;
+      top: -35%;
+      z-index: 999;
+
+      @media (max-width: 430px) {
+        display: none;
+      }
+    }
+  }
+}