Added new reducer for tracker

src/components/UI/ModalCreate/ModalCreate.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { addProject } from "../../../redux/projectsTrackerSlice";
+
+import "./ModalCreate.scss";
+
+export const ModalCreate = ({ active, setActive, title }) => {
+  const [inputValue, setInputValue] = useState("");
+
+  const projectInfo = useSelector(addProject);
+  const dispatch = useDispatch();
+
+  function createName() {
+    let newItem = {
+      name: inputValue,
+      count: 0,
+    };
+    dispatch(addProject(newItem));
+    // console.log(newItem);
+    setActive(false);
+  }
+
+  return (
+    <div
+      className={active ? "modal-project active" : "modal-project"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-project__content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="title-project">
+          <h4>{title}</h4>
+          <div className="input-container">
+            <input
+              className="name-project"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+            ></input>
+          </div>
+        </div>
+        <button className="create-project" onClick={createName}>
+          Создать
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ModalCreate;

src/components/UI/ModalCreate/ModalCreate.scss

@@ -0,0 +1,71 @@
+.modal-project {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  &__content {
+    padding: 15px;
+    background: #ffffff;
+    border: 1px solid #dde2e4;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title-project {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .input-container {
+        width: 220px;
+        height: 25px;
+        border-radius: 44px;
+        border: 1px solid #d1d1d1;
+      }
+
+      h4 {
+        color: #111112;
+        margin-bottom: 10px;
+        font-size: 14px !important;
+      }
+    }
+
+    .name-project {
+      margin-left: 10px;
+      border: none;
+      outline: none;
+      height: 100%;
+      width: 90%;
+      font-size: 14px;
+    }
+
+    .create-project {
+      margin: 15px 0 0 0;
+      width: 188px;
+      height: 40px;
+      background: #52b709;
+      border-radius: 44px;
+      border: none;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 32px;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.modal-project.active {
+  transform: scale(1);
+}

src/components/UI/ModalProject/ModalProject.js

@@ -1,27 +0,0 @@
-import React from "react";
-
-import "./ModalProject.scss";
-
-export const ModalProject = ({ active, setActive }) => {
-  return (
-    <div
-      className={active ? "modal-project active" : "modal-project"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-project__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="title-project">
-          <h4>Укажите название проекта: </h4>
-          <div className="input-container">
-            <input className="name-project"></input>
-          </div>
-        </div>
-        <button className="create-project">Создать</button>
-      </div>
-    </div>
-  );
-};
-
-export default ModalProject;

src/components/UI/ModalProject/ModalProject.scss

@@ -1,57 +0,0 @@
-.modal-project {
-  z-index: 9;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.11);
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: scale(0);
-}
-
-.modal-project.active {
-  transform: scale(1);
-}
-
-.modal-project__content {
-  padding: 15px;
-  background: #ffffff;
-  border: 1px solid #dde2e4;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title-project {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .input-container {
-      width: 220px;
-      height: 25px;
-      border-radius: 44px;
-      border: 1px solid #d1d1d1;
-    }
-
-    h4 {
-      margin-bottom: 10px;
-    }
-  }
-
-  .name-project {
-    margin-left: 10px;
-    border: none;
-    outline: none;
-    height: 100%;
-    width: 90%;
-    font-size: 14px;
-  }
-
-  .create-project {
-    margin: 15px 0 0 0;
-  }
-}