made breadcrumbs

src/features/BreadCrumbs/BreadCrumbs.scss

@@ -1,5 +1,29 @@
 .breadcrumbs {
+  margin-bottom: 40px;
   display: flex;
   align-items: center;
   gap: 8px;
+
+  span,
+  a {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%;
+  }
+
+  a {
+    gap: 8px;
+    color: rgb(72, 159, 225);
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  span {
+    color: rgb(50, 48, 58);
+  }
 }

src/features/BreadCrumbs/BreadCrumbs.tsx

@@ -1,9 +1,65 @@
 "use client";
 
+import { Link, usePathname } from "@/shared/config/navigation";
 import "./BreadCrumbs.scss";
+import { useSearchParams } from "next/navigation";
+import Image from "next/image";
+import chevron from "./icons/chevron-right.svg";
 
-const BreadCrumbs = () => {
-  return <div className="breadcrumbs"></div>;
+interface IBreadcrumbsProps {
+  homeRequired?: boolean;
+}
+
+const BreadCrumbs: React.FC<IBreadcrumbsProps> = ({
+  homeRequired,
+}: IBreadcrumbsProps) => {
+  const pathname = usePathname();
+  const query = useSearchParams().get("title");
+  const routes = pathname.split("/").filter((route) => route !== "");
+  const tRoutes: Record<string, string> = {
+    "about-us": "О нас",
+    "create-report": "Написать обращение",
+    news: "Новости",
+    profile: "Профиль",
+    "my-reports": "Мои обращения",
+    personal: "Личные данные",
+    report: "Обращение",
+    "sign-in": "Войти в аккаунт",
+    "forgot-password": "Восстановление пароля",
+    "reset-code": "Сброс пароля",
+    "sign-up": "Регистрация",
+    "confirm-email": "Потверждение почты",
+    statistics: "Статистика",
+    volunteers: "Волонтеры",
+  };
+  return (
+    <div className="breadcrumbs">
+      {homeRequired && (
+        <Link href="/">
+          Главная <Image src={chevron} alt="Chevron Right Icon" />
+        </Link>
+      )}
+      {routes.map((route, i, array) => {
+        if (parseInt(route)) {
+          if (routes[0] === "news") {
+            return <span key={query}>{query}</span>;
+          }
+        }
+        if (i === array.length - 1) {
+          return <span key={route}>{tRoutes[route]}</span>;
+        } else {
+          return route === "report" ? (
+            <span>{tRoutes[route]}</span>
+          ) : (
+            <Link href={`/${route}`}>
+              {tRoutes[route]}
+              <Image src={chevron} alt="Chevron Right Icon" />
+            </Link>
+          );
+        }
+      })}
+    </div>
+  );
 };
 
 export default BreadCrumbs;

src/features/BreadCrumbs/icons/chevron-right.svg

@@ -0,0 +1,14 @@
+<svg width="16.000000" height="16.000000" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip7_52716">
+			<rect id="chevron-right" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+	</defs>
+	<rect id="chevron-right" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip7_52716)">
+		<path id="Vector" d="M6 4L10 8L6 12" stroke="#667085" stroke-opacity="1.000000" stroke-width="1.000000" stroke-linejoin="round" stroke-linecap="round"/>
+	</g>
+</svg>