Add files via upload

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;

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);
+}