Working in paginations

src/components/ArchiveTableTracker/ArchiveTableTracker.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactPaginate from "react-paginate";
+
+import AllMyTasksItem from "@components/Common/AllMyTasksItem/AllMyTasksItem";
+
+const ArchiveTableTracker = ({ filterCompleteTasks, projects, loader }) => {
+  return (
+    <>
+      <table className="archive__table">
+        <thead>
+          <tr>
+            <th>Задача</th>
+            <th>Потраченное время</th>
+            <th>Дата окончания</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {!loader && (
+            <>
+              {Boolean(filterCompleteTasks.length) ? (
+                filterCompleteTasks.map((task, index) => {
+                  <AllMyTasksItem task={task} projects={projects} />;
+                })
+              ) : (
+                <div className="archive__noItem">
+                  <p>В данном месяце у вас не было задач</p>
+                </div>
+              )}
+            </>
+          )}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default ArchiveTableTracker;

src/components/ArchiveTableTracker/archiveTableTracker.scss

@@ -0,0 +1,54 @@
+.archive {
+  &__table {
+    margin: 29px 0 0 0;
+    height: 67px;
+    width: 100%;
+    font-size: 14px;
+    font-weight: 400;
+
+    thead {
+      background: #f1f1f1;
+      color: #5b6871;
+      border-radius: 12px;
+      height: 65px;
+      background: #f1f1f1;
+      color: #5b6871;
+
+      th {
+        &:first-child {
+          padding-left: 10px;
+          border-top-left-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+        &:last-child {
+          border-top-right-radius: 12px;
+          border-bottom-right-radius: 12px;
+        }
+      }
+    }
+
+    tbody {
+      color: #000;
+      tr {
+        background-color: white;
+
+        &:nth-child(2n) {
+          background-color: rgba(241, 241, 241, 0.23);
+        }
+      }
+
+      td {
+        height: 65px;
+        border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+        &:first-child {
+          max-width: 275px;
+          padding-left: 10px;
+          color: #111112;
+          font-size: 17px;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}