From d40398b2bd95be075fb9e22481408c8ab4e63fe4 Mon Sep 17 00:00:00 2001
From: Alexander Morugin <nobilis@bk.ru>
Date: Fri, 19 Apr 2024 17:50:28 +0300
Subject: [PATCH] enhancement_313_bread_crumbs_at_pages

---
 src/app/router/AppRouter/ui/AppRouter.tsx     |  3 +-
 src/entities/AboutUs/ui/AboutUs.module.scss   |  2 --
 src/pages/AboutUsPage/AboutUsPage.module.scss | 22 +++++--------
 src/pages/AboutUsPage/AboutUsPage.tsx         | 33 ++++++++++---------
 .../ContactsPage/ContactsPage.module.scss     | 20 ++++++++---
 src/pages/ContactsPage/ContactsPage.tsx       | 15 +++++++--
 .../DeliveryPage/DeliveryPage.module.scss     | 13 ++++++++
 src/pages/DeliveryPage/DeliveryPage.tsx       | 25 ++++++++++++++
 src/widgets/Header/Header.tsx                 |  2 +-
 9 files changed, 94 insertions(+), 41 deletions(-)
 create mode 100644 src/pages/DeliveryPage/DeliveryPage.module.scss
 create mode 100644 src/pages/DeliveryPage/DeliveryPage.tsx

diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index 5de57156..630f5963 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -6,6 +6,7 @@ import CartPage from '@/pages/CartPage/CartPage'
 import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import ContactsPage from '@/pages/ContactsPage/ContactsPage'
+import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import { FeedbackPage } from '@/pages/FeedbackPage/FeedbackPage'
@@ -59,7 +60,7 @@ export const AppRouter = createBrowserRouter([
       },
       {
         path: Routes.DELIVERY,
-        element: <ProductsPage /> // временная заглушка нужна страница с информацией о доставке
+        element: <DeliveryPage />
       },
       {
         path: Routes.FAVORITES,
diff --git a/src/entities/AboutUs/ui/AboutUs.module.scss b/src/entities/AboutUs/ui/AboutUs.module.scss
index 6ffa0ae5..352c85a6 100644
--- a/src/entities/AboutUs/ui/AboutUs.module.scss
+++ b/src/entities/AboutUs/ui/AboutUs.module.scss
@@ -5,6 +5,4 @@
   font-size: 16px;
   font-weight: 400;
   color: var.$body-color;
-  margin: 0;
-  padding: 30px 0 56px;
 }
diff --git a/src/pages/AboutUsPage/AboutUsPage.module.scss b/src/pages/AboutUsPage/AboutUsPage.module.scss
index eda7fbae..fbd4bf6c 100644
--- a/src/pages/AboutUsPage/AboutUsPage.module.scss
+++ b/src/pages/AboutUsPage/AboutUsPage.module.scss
@@ -1,19 +1,15 @@
 @use '@/shared/styles/utils/variables' as var;
 
-.title {
+.aboutUs {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
   width: 100%;
-  margin: 0 0 10px;
-  padding: 0;
-}
-
-.link {
-  text-decoration: none;
-  color: var.$subtitle-color;
-  font-size: 13.5px;
-  font-weight: 400;
-  line-height: 16.2px;
+  padding: 0 0 56px;
 
-  &:hover {
-    color: var.$theme-primary-color;
+  &__titleBox {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 }
diff --git a/src/pages/AboutUsPage/AboutUsPage.tsx b/src/pages/AboutUsPage/AboutUsPage.tsx
index 2d705e10..f2e568d4 100644
--- a/src/pages/AboutUsPage/AboutUsPage.tsx
+++ b/src/pages/AboutUsPage/AboutUsPage.tsx
@@ -1,17 +1,21 @@
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Link } from 'react-router-dom'
 
 import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import AboutUs from '@/entities/AboutUs'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
-import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './AboutUsPage.module.scss'
 import { getAboutUsSelector } from './model/selectors/selectors'
 import { getAboutUs } from './model/services/getAboutUs'
 
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'О нас', href: '' }
+]
+
 const AboutUsPage = () => {
   const dispatch = useDispatch<AppDispatch>()
   const aboutUs = useSelector(getAboutUsSelector)
@@ -22,20 +26,17 @@ const AboutUsPage = () => {
 
   return (
     <WrapperForMainContent>
-      {aboutUs?.map((item, index) => (
-        <Heading key={index} type={HeadingType.MAIN} className={styles.title}>
-          {item.headline}
-        </Heading>
-      ))}
-
-      <Subheading>
-        <Link to={'/'} className={styles.link}>
-          Главная
-        </Link>{' '}
-        / О нас
-      </Subheading>
-
-      {aboutUs?.map((item, index) => <AboutUs key={index} text={item.text} />)}
+      <section className={styles.aboutUs}>
+        <div className={styles.aboutUs__titleBox}>
+          {aboutUs?.map((item, index) => (
+            <Heading key={index} type={HeadingType.MAIN}>
+              {item.headline}
+            </Heading>
+          ))}
+          <Breadcrumbs links={links} />
+        </div>
+        {aboutUs?.map((item, index) => <AboutUs key={index} text={item.text} />)}
+      </section>
     </WrapperForMainContent>
   )
 }
diff --git a/src/pages/ContactsPage/ContactsPage.module.scss b/src/pages/ContactsPage/ContactsPage.module.scss
index e6f2f6b4..595d672e 100644
--- a/src/pages/ContactsPage/ContactsPage.module.scss
+++ b/src/pages/ContactsPage/ContactsPage.module.scss
@@ -1,9 +1,19 @@
-.heading {
-  align-self: flex-start;
-  padding: 30px;
-}
-
 .contacts {
+  display: flex;
+  flex-direction: column;
+  padding-top: 24px;
+  padding-bottom: 56px;
+
+  &__titleBox {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    max-width: 1330px;
+    margin: 0 auto;
+    padding-bottom: 30px;
+  }
+
   &__map {
     width: 100%;
     width: 500px;
diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx
index 1a438dba..4e423797 100644
--- a/src/pages/ContactsPage/ContactsPage.tsx
+++ b/src/pages/ContactsPage/ContactsPage.tsx
@@ -3,15 +3,24 @@ import { Link } from 'react-router-dom'
 
 import YMap from '@/assets/icons/YMap.svg'
 import FormQuestion from '@/features/FormQuestion/ui/FormQuestion'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Map from '@/widgets/Map/Map'
 
 import styles from './ContactsPage.module.scss'
 
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Контакты', href: '' }
+]
+
 const ContactsPage: FC = () => {
   return (
-    <div className={styles.contacts}>
-      <Heading className={styles.heading}>Контакты</Heading>
+    <section className={styles.contacts}>
+      <div className={styles.contacts__titleBox}>
+        <Heading type={HeadingType.MAIN}>Контакты</Heading>
+        <Breadcrumbs links={links} />
+      </div>
       <Map />
       <div className={styles.contacts__info}>
         <div className={styles.contacts__block}>
@@ -69,7 +78,7 @@ const ContactsPage: FC = () => {
         </div>
         <FormQuestion />
       </div>
-    </div>
+    </section>
   )
 }
 
diff --git a/src/pages/DeliveryPage/DeliveryPage.module.scss b/src/pages/DeliveryPage/DeliveryPage.module.scss
new file mode 100644
index 00000000..51b13192
--- /dev/null
+++ b/src/pages/DeliveryPage/DeliveryPage.module.scss
@@ -0,0 +1,13 @@
+.delivery {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 100%;
+  padding: 0 0 56px;
+
+  &__titleBox {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
diff --git a/src/pages/DeliveryPage/DeliveryPage.tsx b/src/pages/DeliveryPage/DeliveryPage.tsx
new file mode 100644
index 00000000..8abdd721
--- /dev/null
+++ b/src/pages/DeliveryPage/DeliveryPage.tsx
@@ -0,0 +1,25 @@
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+
+import styles from './DeliveryPage.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Информация о доставке', href: '' }
+]
+
+const DeliveryPage = () => {
+  return (
+    <WrapperForMainContent>
+      <section className={styles.delivery}>
+        <div className={styles.delivery__titleBox}>
+          <Heading type={HeadingType.MAIN}>Информация о доставке</Heading>
+          <Breadcrumbs links={links} />
+        </div>
+      </section>
+    </WrapperForMainContent>
+  )
+}
+
+export default DeliveryPage
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
index c6984bb7..e5637bc4 100644
--- a/src/widgets/Header/Header.tsx
+++ b/src/widgets/Header/Header.tsx
@@ -68,7 +68,7 @@ function Header() {
     () => (
       <ul className={styles['header__context-menu-list']}>
         <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
+          <Link to={Routes.DELIVERY} className={styles['header__context-menu-link']}>
             Информация о доставке
           </Link>
         </li>