Что-то пошло не так =( {error};
+ return ;
}
return this.props.children;
}
diff --git a/src/hoc/Fallback.jsx b/src/hoc/Fallback.jsx
new file mode 100644
index 00000000..6c473380
--- /dev/null
+++ b/src/hoc/Fallback.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import rightArrow from "assets/icons/arrows/arrowRight.svg";
+import logo from "assets/images/logo/ITguild.svg";
+
+import "./fallback.scss";
+
+export const Fallback = () => {
+ return (
+
+ );
+};
diff --git a/src/hoc/fallback.scss b/src/hoc/fallback.scss
new file mode 100644
index 00000000..3702fb8f
--- /dev/null
+++ b/src/hoc/fallback.scss
@@ -0,0 +1,24 @@
+.fallback {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 100px;
+ gap: 15px;
+
+ img {
+ max-width: 250px;
+ }
+
+ a {
+ display: flex;
+ column-gap: 10px;
+ align-items: center;
+ font-size: 20px;
+ color: black;
+ transition: all 0.3s ease;
+
+ &:hover {
+ scale: 1.1;
+ }
+ }
+}
diff --git a/src/index.js b/src/index.js
index d03a525d..ee6aaa8c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
+import ErrorBoundary from "./hoc/ErrorBoundary";
import "./index.css";
import { store } from "./store/store";
ReactDOM.createRoot(document.getElementById("root")).render(
-
-
-
+
+
+
+
+
);
diff --git a/src/pages/PartnerСategories/PartnerСategories.jsx b/src/pages/PartnerСategories/PartnerСategories.jsx
index 8266df93..8799a793 100644
--- a/src/pages/PartnerСategories/PartnerСategories.jsx
+++ b/src/pages/PartnerСategories/PartnerСategories.jsx
@@ -1,5 +1,6 @@
import { getTheme } from "@table-library/react-table-library/baseline";
import { CompactTable } from "@table-library/react-table-library/compact";
+import { usePagination } from "@table-library/react-table-library/pagination";
import { useSort } from "@table-library/react-table-library/sort";
import { useTheme } from "@table-library/react-table-library/theme";
import React, { useEffect, useState } from "react";
@@ -101,6 +102,13 @@ export const PartnerCategories = () => {
}
);
+ const pagination = usePagination(data, {
+ state: {
+ page: 0,
+ size: 5
+ }
+ });
+
useEffect(() => {
setLoader(true);
apiRequest("/project/my-employee").then((el) => {
@@ -259,7 +267,30 @@ export const PartnerCategories = () => {
data={data}
theme={theme}
sort={sort}
+ pagination={pagination}
/>
+
+
+ Total Pages: {pagination.state.getTotalPages(data.nodes)}
+
+
+
+ Page:{" "}
+ {pagination.state.getPages(data.nodes).map((_, index) => (
+
+ ))}
+
+
>
) : (
diff --git a/src/pages/PartnerСategories/partnerСategories.scss b/src/pages/PartnerСategories/partnerСategories.scss
index 6f2b840c..e7d2dd26 100644
--- a/src/pages/PartnerСategories/partnerСategories.scss
+++ b/src/pages/PartnerСategories/partnerСategories.scss
@@ -176,5 +176,19 @@
font-size: 16px;
align-items: center;
}
+
+ &__pagination {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ font-size: 16px;
+ align-items: center;
+ }
+
+ &__pages {
+ display: flex;
+ column-gap: 5px;
+ align-items: center;
+ }
}
}