made breadcrumbs

src/app/[locale]/about-us/AboutUs.scss

@@ -7,7 +7,7 @@
     width: fit-content;
   }
 
-  img {
+  &__image {
     align-self: center;
     margin-bottom: 65px;
     border-radius: 12px;

src/app/[locale]/about-us/page.tsx

@@ -3,32 +3,68 @@ import "./AboutUs.scss";
 import Image from "next/image";
 import header from "./assets/header.svg";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | О нас",
-  description:
-    'Страница "О Нас" KG ROAD',
+  description: 'Страница "О Нас" KG ROAD',
 };
 
 const AboutUs = () => {
   return (
     <div className="about-us page-padding">
+      <BreadCrumbs homeRequired />
       <Typography element="h2">О нас</Typography>
 
-      <Image src={header} alt="Header Image" />
+      <Image
+        className="about-us__image"
+        src={header}
+        alt="Header Image"
+      />
       <div className="about-us__descriptions">
-        <p>Transparency International-Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.</p>
+        <p>
+          Transparency International-Кыргызстан - филиал международной
+          организации Transparency International в Кыргызской
+          Республике.
+        </p>
         <h4>Миссия ТИ-Кыргызстан</h4>
-        <p>Продвижение эффективной общественной политики и надлежащего управления в целях предотвращения коррупции и усиления демократии в стране.        </p>
+        <p>
+          Продвижение эффективной общественной политики и надлежащего
+          управления в целях предотвращения коррупции и усиления
+          демократии в стране.{" "}
+        </p>
         <h4>Цели и приоритеты ТИ-Кыргызстан:</h4>
         <ul>
-          <li> - антикоррупционное просвещение населения, повышение общественного осознания значимости и важности борьбы с коррупцией в Кыргызстане;</li>
-          <li> - организация изучения практики и теории борьбы с коррупцией и участия в ней структур гражданского общества в Кыргызстане и других странах;</li>
-          <li> - содействие гражданам и организациям в реализации их конституционных прав и свобод;</li>
-          <li> - преимущественная ориентация на международный опыт уменьшения коррупции, освоение его технологий, ресурсов, а также включение структур гражданского общества в международный диалог борьбы с коррупцией.</li>
+          <li>
+            {" "}
+            - антикоррупционное просвещение населения, повышение
+            общественного осознания значимости и важности борьбы с
+            коррупцией в Кыргызстане;
+          </li>
+          <li>
+            {" "}
+            - организация изучения практики и теории борьбы с
+            коррупцией и участия в ней структур гражданского общества
+            в Кыргызстане и других странах;
+          </li>
+          <li>
+            {" "}
+            - содействие гражданам и организациям в реализации их
+            конституционных прав и свобод;
+          </li>
+          <li>
+            {" "}
+            - преимущественная ориентация на международный опыт
+            уменьшения коррупции, освоение его технологий, ресурсов, а
+            также включение структур гражданского общества в
+            международный диалог борьбы с коррупцией.
+          </li>
         </ul>
       </div>
-      <p>Photo By Mzximvs VdB from Brussels, belgium - Road to Issyk-Kul (south shore), CC BY-SA 2.0</p>
+      <p>
+        Photo By Mzximvs VdB from Brussels, belgium - Road to
+        Issyk-Kul (south shore), CC BY-SA 2.0
+      </p>
     </div>
   );
 };

src/app/[locale]/create-report/page.tsx

@@ -2,11 +2,11 @@ import Typography from "@/shared/ui/components/Typography/Typography";
 import "./CreateReport.scss";
 import dynamic from "next/dynamic";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Написать обращение",
-  description:
-    "Написать обращение KG ROAD",
+  description: "Написать обращение KG ROAD",
 };
 
 const DynamicForm = dynamic(
@@ -19,6 +19,7 @@ const DynamicForm = dynamic(
 const CreateReport = () => {
   return (
     <div className="create-report page-padding">
+      <BreadCrumbs homeRequired />
       <Typography element="h2">Написать обращение</Typography>
 
       <DynamicForm />

src/app/[locale]/news/News.scss

@@ -1,21 +1,25 @@
 .news {
   display: flex;
   flex-direction: column;
-  gap: 40px;
 
   h2 {
     width: fit-content;
+    margin-bottom: 40px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .news {
-    gap: 30px;
+    h2 {
+      margin-bottom: 30px;
+    }
   }
 }
 
 @media screen and (max-width: 550px) {
   .news {
-    gap: 20px;
+    h2 {
+      margin-bottom: 20px;
+    }
   }
 }

src/app/[locale]/news/[id]/page.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import message from "./icons/message.svg";
 import calendar from "./icons/calendar.svg";
 import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 const NewsDetails = async ({
   params,
@@ -39,6 +40,7 @@ const NewsDetails = async ({
 
   return (
     <div className="news-details page-padding">
+      <BreadCrumbs />
       <Typography element="h2">{data.title}</Typography>
 
       <div className="news-details__img">

src/app/[locale]/news/page.tsx

@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import "./News.scss";
 import Typography from "@/shared/ui/components/Typography/Typography";
 import NewsList from "@/widgets/NewsList/NewsList";
@@ -5,8 +6,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Новости",
-  description:
-    "Страница новостей KG ROAD",
+  description: "Страница новостей KG ROAD",
 };
 
 const News = ({
@@ -18,6 +18,8 @@ const News = ({
 }) => {
   return (
     <div className="news page-padding">
+      <BreadCrumbs homeRequired />
+
       <Typography element="h2">Новости</Typography>
 
       <NewsList searchParams={searchParams} />

src/app/[locale]/profile/layout.tsx

@@ -7,11 +7,11 @@ import { apiInstance } from "@/shared/config/apiConfig";
 import { getServerSession } from "next-auth";
 import { authConfig } from "@/shared/config/authConfig";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Профиль",
-  description:
-    "Страница профиля KG ROAD",
+  description: "Страница профиля KG ROAD",
 };
 
 const Profile = async ({
@@ -43,6 +43,7 @@ const Profile = async ({
 
   return (
     <div className="profile page-padding">
+      <BreadCrumbs />
       <Typography element="h2">Личный кабинет</Typography>
       <ProfileNav report_count={data?.report_count as number} />
 

src/app/[locale]/report/[id]/page.tsx

@@ -25,6 +25,7 @@ const ReportDetails = async ({
 }: {
   params: { id: string };
 }) => {
+  console.log(JSON.parse(params.id));
   const getReportDetails = async () => {
     const res = await fetch(
       `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
@@ -37,7 +38,7 @@ const ReportDetails = async ({
 
   return (
     <div className="report-details page-padding">
-      <BreadCrumbs />
+      <BreadCrumbs homeRequired />
       <div className="report-details__container">
         <ReportInformation
           id={report.id}

src/app/[locale]/sign-in/forgot-password/page.tsx

@@ -1,10 +1,14 @@
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import "@/shared/ui/auth-classes.scss";
 import ForgotPasswordForm from "@/widgets/forms/ForgotPasswordForm/ForgotPasswordForm";
 
 const ForgotPassword = () => {
   return (
-    <div className="auth-page">
-      <ForgotPasswordForm />
+    <div className="page-padding">
+      <BreadCrumbs />
+      <div className="auth-page">
+        <ForgotPasswordForm />
+      </div>
     </div>
   );
 };

src/app/[locale]/sign-up/confirm-email/page.tsx

@@ -2,6 +2,7 @@ import "@/shared/ui/auth-classes.scss";
 import Image from "next/image";
 import mail from "./icons/mail.svg";
 import ConfirmEmailForm from "@/widgets/forms/ConfirmEmailForm/ConfirmEmailForm";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 const ConfirmEmail = ({
   searchParams,
@@ -11,16 +12,24 @@ const ConfirmEmail = ({
   };
 }) => {
   return (
-    <div className="auth-page">
-      <div className="auth-wrapper">
-        <div className="auth-icon2">
-          <Image src={mail} alt="Mail icon" width={56} height={56} />
+    <div className="page-padding">
+      <BreadCrumbs />
+      <div className="auth-page">
+        <div className="auth-wrapper">
+          <div className="auth-icon2">
+            <Image
+              src={mail}
+              alt="Mail icon"
+              width={56}
+              height={56}
+            />
+          </div>
+          <div className="auth-header">
+            <h2>Проверьте свою почту</h2>
+            <p>Мы отправили код на почту {searchParams.email}</p>
+          </div>
+          <ConfirmEmailForm email={searchParams.email} />
         </div>
-        <div className="auth-header">
-          <h2>Проверьте свою почту</h2>
-          <p>Мы отправили код на почту {searchParams.email}</p>
-        </div>
-        <ConfirmEmailForm email={searchParams.email} />
       </div>
     </div>
   );

src/app/[locale]/statistics/Statistics.scss

@@ -1,21 +1,25 @@
 .statistics {
   display: flex;
   flex-direction: column;
-  gap: 40px;
 
   h2 {
     width: fit-content;
+    margin-bottom: 40px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .statistics {
-    gap: 30px;
+    h2 {
+      margin-bottom: 30px;
+    }
   }
 }
 
 @media screen and (max-width: 550px) {
   .statistics {
-    gap: 20px;
+    h2 {
+      margin-bottom: 20px;
+    }
   }
 }

src/app/[locale]/statistics/page.tsx

@@ -2,11 +2,11 @@ import Typography from "@/shared/ui/components/Typography/Typography";
 import "./Statistics.scss";
 import StatisticsTable from "@/widgets/tables/StatisticsTable/StatisticsTable";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Статистика",
-  description:
-    "Страница статистики KG ROAD",
+  description: "Страница статистики KG ROAD",
 };
 
 const Statistics = ({
@@ -16,6 +16,7 @@ const Statistics = ({
 }) => {
   return (
     <div className="statistics page-padding">
+      <BreadCrumbs homeRequired />
       <Typography element="h2">Статистика</Typography>
       <StatisticsTable searchParams={searchParams} />
     </div>

src/app/[locale]/volunteers/Volunteers.scss

@@ -1,21 +1,25 @@
 .volunteers {
   display: flex;
   flex-direction: column;
-  gap: 40px;
 
   h2 {
     width: fit-content;
+    margin-bottom: 40px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .volunteers {
-    gap: 30px;
+    h2 {
+      margin-bottom: 30px;
+    }
   }
 }
 
 @media screen and (max-width: 550px) {
   .volunteers {
-    gap: 20px;
+    h2 {
+      margin-bottom: 20px;
+    }
   }
 }

src/app/[locale]/volunteers/page.tsx

@@ -2,16 +2,18 @@ import Typography from "@/shared/ui/components/Typography/Typography";
 import "./Volunteers.scss";
 import VolunteersTable from "@/widgets/tables/VolunteersTable/VolunteersTable";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Волонтеры",
-  description:
-    "Страница волонтеров KG ROAD",
+  description: "Страница волонтеров KG ROAD",
 };
 
 const Volunteers = () => {
   return (
     <div className="volunteers page-padding">
+      <BreadCrumbs homeRequired />
+
       <Typography element="h2">Волонтеры</Typography>
       <VolunteersTable />
     </div>

src/entities/NewsCard/NewsCard.tsx

@@ -58,7 +58,13 @@ const NewsCard: React.FC<INewsCard> = ({
         <p>{sliceDescription(description)}</p>
       </div>
 
-      <Link href={`/news/${id}`} className="news-card__more-btn">
+      <Link
+        href={{
+          pathname: `/news/${id}`,
+          query: { title: title },
+        }}
+        className="news-card__more-btn"
+      >
         {t("details")}
       </Link>
     </div>

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>

src/shared/ui/auth-classes.scss

@@ -29,8 +29,8 @@
 }
 
 .auth-icon2 {
-  width: 60px;
-  height: 60px;
+  min-width: 60px;
+  min-height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;

src/widgets/ReviewSection/ReviewSection.tsx

@@ -107,7 +107,6 @@ const ReviewSection: React.FC<IReviewsSectionProps> = ({
     if (loader) return;
     if (observer.current) observer.current.disconnect();
     const callback = function (entries: any) {
-      console.log(reviewCount, pageSize);
       if (
         entries[0].isIntersecting &&
         (reviews?.results.length as number) <= reviewCount