From 773f764022a35508c40cc197ab7b265f37e4eb8a Mon Sep 17 00:00:00 2001
From: innovatixhub <innovatixhub@gmail.com>
Date: Tue, 26 Nov 2024 04:55:39 -0800
Subject: [PATCH] Add files via upload

---
 .../pagehistory/PagesHistory.jsx              | 41 +++++++++++++++++++
 .../pagehistory/PagesHistory.module.scss      | 37 +++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 src/componants/shared/minicomponents/pagehistory/PagesHistory.jsx
 create mode 100644 src/componants/shared/minicomponents/pagehistory/PagesHistory.module.scss

diff --git a/src/componants/shared/minicomponents/pagehistory/PagesHistory.jsx b/src/componants/shared/minicomponents/pagehistory/PagesHistory.jsx
new file mode 100644
index 0000000..43276d1
--- /dev/null
+++ b/src/componants/shared/minicomponents/pagehistory/PagesHistory.jsx
@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import s from "./PagesHistory.module.scss";
+
+const PagesHistory = ({ history, historyPaths }) => {
+  const previousPages = history.slice(0, history.length - 1);
+  const currentPage = history[history.length - 1];
+  const navigateTo = useNavigate();
+  const { t } = useTranslation();
+
+  function navigateToPage(pageIndex) {
+    const clickedParam = historyPaths?.[pageIndex];
+
+    if (clickedParam) {
+      navigateTo(clickedParam.path);
+      return;
+    }
+
+    navigateTo(`${history[pageIndex].toLowerCase()}`);
+  }
+
+  return (
+    <div className={s.pageHistory}>
+      {previousPages.map((page, i) => {
+        const pageName = page === "/" ? t("nav.home") : page;
+
+        return (
+          <div className={s.page} key={i}>
+            <a href="#" onClick={() => navigateToPage(i)}>
+              {pageName}
+            </a>
+            <span>/</span>
+          </div>
+        );
+      })}
+
+      <span className={s.currentPage}>{currentPage}</span>
+    </div>
+  );
+};
+export default PagesHistory;
diff --git a/src/componants/shared/minicomponents/pagehistory/PagesHistory.module.scss b/src/componants/shared/minicomponents/pagehistory/PagesHistory.module.scss
new file mode 100644
index 0000000..df6afe5
--- /dev/null
+++ b/src/componants/shared/minicomponents/pagehistory/PagesHistory.module.scss
@@ -0,0 +1,37 @@
+.pageHistory {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  row-gap: 10px;
+}
+
+.page {
+  font-size: .875rem;
+  color: var(--dark-gray);
+}
+
+.page>a {
+  outline: none;
+  user-select: none;
+  color: var(--dark-gray);
+  transition: color .1s;
+
+  &:hover {
+    color: var(--black);
+  }
+
+  &:focus-visible {
+    color: var(--orange-degree2);
+    text-decoration: underline;
+  }
+}
+
+.page>span {
+  margin: 0 8px;
+  user-select: none;
+}
+
+.currentPage {
+  font-size: .875rem;
+  color: var(--black);
+}
\ No newline at end of file