Merge pull request #324 from Studio-Yandex-Practicum/enhancement_314_…

…product_page Добавил breadcrumbs на страницу товара. Немного поправил компонент br…
Studio-Yandex-Practicum · Apr 19, 2024 · 205b5ba · 205b5ba
2 parents 8ff0f59 + 5c5a55a
commit 205b5ba
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/src/pages/ProductPage/ProductPage.module.scss 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
@@ -4,15 +4,17 @@ 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'
 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
@@ -1,9 +1,14 @@
 @use '../../styles/utils/variables' as var;
 
 .breadcrumbs {
-    display: flex;
+  display: flex;
 }
 
 .link {
-    color: var.$subtitle-color;
-}
+  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
@@ -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>
         )