From 5c5a55a153bdb62844bea10e514bfee95062744e Mon Sep 17 00:00:00 2001
From: kirill-k88 <kirill-k88@ya.ru>
Date: Fri, 19 Apr 2024 12:53:00 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20br?=
 =?UTF-8?q?eadcrumbs=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=86=D1=83=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80=D0=B0.=20=D0=9D?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BF=D0=BE=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=20breadcrumbs=20=D0=B2=20=D1=81=D0=BE=D0=BE?=
 =?UTF-8?q?=D1=82=D0=B2=D0=B5=D1=82=D1=81=D1=82=D0=B2=D0=B8=D0=B8=20=D1=81?=
 =?UTF-8?q?=20=D1=81=D0=B0=D0=B9=D1=82=D0=BE=D0=BC=20MaxBoom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProductPage/ProductPage.module.scss     |  6 ++++++
 src/pages/ProductPage/ProductPage.tsx             | 14 ++++++++++++--
 src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss | 11 ++++++++---
 src/shared/ui/Breadcrumbs/Breadcrumbs.tsx         |  4 ++--
 4 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/ProductPage/ProductPage.module.scss

diff --git a/src/pages/ProductPage/ProductPage.module.scss b/src/pages/ProductPage/ProductPage.module.scss
new file mode 100644
index 00000000..d4a58af9
--- /dev/null
+++ b/src/pages/ProductPage/ProductPage.module.scss
@@ -0,0 +1,6 @@
+.pageDescriptor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
index 11ba00f2..e48395a1 100644
--- a/src/pages/ProductPage/ProductPage.tsx
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -4,8 +4,9 @@ import { useParams } from 'react-router'
 
 import { StateSchema } from '@/app/providers/StoreProvider'
 import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
-import { PageDescription } from '@/components/PageDescription/PageDescription'
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading from '@/shared/ui/Heading/Heading'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
 import { Product } from '@/widgets/Product/Product'
 import { ProductInfo } from '@/widgets/ProductInfo/ProductInfo'
@@ -13,6 +14,7 @@ import { ViewedProducts } from '@/widgets/ViewedProducts/ViewedProducts'
 
 import { addToViewedProducts } from './model/functions/functions'
 import { getProduct } from './model/slice/productSlice'
+import styles from './ProductPage.module.scss'
 
 /**
  * Страница с выбранным товаром.
@@ -23,6 +25,11 @@ export const ProductPage = () => {
   const productStore = useSelector((store: StateSchema) => store.product)
   const { slug } = useParams()
 
+  const links = [
+    { heading: 'Главная', href: '/' },
+    { heading: productStore.product.name, href: '' }
+  ]
+
   useEffect(() => {
     if (slug) dispatch(getProduct(slug))
   }, [slug])
@@ -34,7 +41,10 @@ export const ProductPage = () => {
   return (
     <>
       <WrapperForMainContent>
-        <PageDescription count={-1} heading={productStore.product.name} />
+        <div className={styles.pageDescriptor}>
+          <Heading>{productStore.product.name}</Heading>
+          <Breadcrumbs links={links} />
+        </div>
         <Product product={productStore.product} />
         <ProductInfo description={productStore.product.description} />
         <Advantages />
diff --git a/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss b/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss
index 861bec5d..1d2ce11f 100644
--- a/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss
+++ b/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss
@@ -1,9 +1,14 @@
 @use '../../styles/utils/variables' as var;
 
 .breadcrumbs {
-    display: flex;
+  display: flex;
 }
 
 .link {
-    color: var.$subtitle-color;
-}
\ No newline at end of file
+  color: var.$subtitle-color;
+  transition: color 0.3s;
+
+  &:hover {
+    color: var.$theme-secondary-color;
+  }
+}
diff --git a/src/shared/ui/Breadcrumbs/Breadcrumbs.tsx b/src/shared/ui/Breadcrumbs/Breadcrumbs.tsx
index db1d80ac..c790d945 100644
--- a/src/shared/ui/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/shared/ui/Breadcrumbs/Breadcrumbs.tsx
@@ -28,9 +28,9 @@ const Breadcrumbs: FC<TBreadcrumbsProps> = ({ links }) => {
           (index !== links.length - 1 && (
             <Subheading>
               <Link key={link.href} to={link.href} className={styles.link}>
-                {link.heading}{' '}
+                {link.heading}
               </Link>
-              <span>{` / `}</span>
+              <span>&nbsp;&#47;&nbsp;</span>
             </Subheading>
           )) || <Subheading key={link.href}>{link.heading}</Subheading>
         )