From d9d3f8ca036a0c2cc0bd1bf6063f166514659dc4 Mon Sep 17 00:00:00 2001
From: kirill-k88 <kirill-k88@ya.ru>
Date: Fri, 14 Jun 2024 09:38:10 +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=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D1=83=D0=B5?=
 =?UTF-8?q?=D0=BC=D1=8B=D0=B5=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B.=20=D0=94?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BA=D0=BE=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B5=D0=B9=D0=BD=D0=B5=D1=80.=20=D0=A1=D0=B4=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=BB=20=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA?=
 =?UTF-8?q?=D1=83=20=D0=BA=D0=BB=D0=B8=D0=BA=D0=B0=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B8=20=D1=81=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=D0=BE=D0=BC=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20?=
 =?UTF-8?q?=D0=B2=D1=8B=D0=B1=D1=80=D0=B0=D0=BD=D0=BD=D0=BE=D0=B9=20=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D0=B8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryCard/CategoryCard.module.scss     | 12 ++++++---
 src/entities/CategoryCard/CategoryCard.tsx    | 23 +++++++++++-----
 src/entities/CategoryCard/getCategoryCard.tsx | 21 ---------------
 src/entities/CategoryCard/types.tsx           | 14 ----------
 .../CategoryPage/CategoryPage.module.scss     |  8 ++++--
 src/pages/CategoryPage/CategoryPage.tsx       | 26 +++++++++++--------
 .../CategoryCardList.module.scss              | 18 ++++++-------
 7 files changed, 56 insertions(+), 66 deletions(-)
 delete mode 100644 src/entities/CategoryCard/getCategoryCard.tsx
 delete mode 100644 src/entities/CategoryCard/types.tsx

diff --git a/src/entities/CategoryCard/CategoryCard.module.scss b/src/entities/CategoryCard/CategoryCard.module.scss
index 7e4c55f4..4d7fc283 100644
--- a/src/entities/CategoryCard/CategoryCard.module.scss
+++ b/src/entities/CategoryCard/CategoryCard.module.scss
@@ -1,15 +1,21 @@
 @use '../../shared/styles/utils/variables' as var;
 
 .category-card {
-  width: 255px;
-  height: 183px;
+  width: 100%;
+  min-height: 183px;
+  padding: 5px;
   border-radius: 10px;
   box-sizing: border-box;
   background-color: white;
   display: flex;
-  gap: auto;
   flex-direction: column;
   justify-content: space-between;
+  cursor: pointer;
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: scale(1.05);
+  }
 }
 
 .category-card__img {
diff --git a/src/entities/CategoryCard/CategoryCard.tsx b/src/entities/CategoryCard/CategoryCard.tsx
index acfca18d..e8b7b47e 100644
--- a/src/entities/CategoryCard/CategoryCard.tsx
+++ b/src/entities/CategoryCard/CategoryCard.tsx
@@ -1,10 +1,11 @@
-import { FC } from 'react'
+import { type FC } from 'react'
+import { useNavigate } from 'react-router'
 
-import { TCategory } from '@/shared/model/types/CategoryModel'
+import defaultCard from '@/assets/images/categoryCards/placeholder-1200x800.png'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import type { TCategory } from '@/shared/model/types/CategoryModel'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
-import card1 from '../../assets/images/categoryCards/placeholder-1200x800.png'
-
 import styles from './CategoryCard.module.scss'
 
 interface CategoryCardProps {
@@ -12,11 +13,21 @@ interface CategoryCardProps {
 }
 
 export const CategoryCard: FC<CategoryCardProps> = ({ category }) => {
+  const navigate = useNavigate()
+
+  const clickHandle = () => {
+    navigate(`${Routes.CATEGORIES}/${category.slug}?id=${category.id}`)
+  }
+
   return (
-    <div className={styles['category-card']}>
+    <div className={styles['category-card']} onClick={clickHandle}>
       {category && (
         <>
-          <img src={category.image || card1} alt={category.name} className={styles['category-card__img']} />
+          <img
+            src={category.image || defaultCard}
+            alt={category.name}
+            className={styles['category-card__img']}
+          />
           <Paragraph className={styles['category-card__text']}>{category.name}</Paragraph>
         </>
       )}
diff --git a/src/entities/CategoryCard/getCategoryCard.tsx b/src/entities/CategoryCard/getCategoryCard.tsx
deleted file mode 100644
index fb904760..00000000
--- a/src/entities/CategoryCard/getCategoryCard.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createAsyncThunk } from '@reduxjs/toolkit'
-
-import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
-import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
-import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
-import { ACTION_GET_СATEGORY } from '@/shared/constants/constants'
-
-import { CategoryInfo } from './types'
-
-export const getCategoryCard = createAsyncThunk<CategoryInfo, number, ThunkConfig<ApiError>>(
-  ACTION_GET_СATEGORY,
-  async (id: number, thunkAPI) => {
-    const { rejectWithValue, extra } = thunkAPI
-    try {
-      const { data } = await extra.api.get(`api/${ApiRoutes.CATEGORIES}`)
-      return data
-    } catch (error) {
-      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
-    }
-  }
-)
diff --git a/src/entities/CategoryCard/types.tsx b/src/entities/CategoryCard/types.tsx
deleted file mode 100644
index be8f54d0..00000000
--- a/src/entities/CategoryCard/types.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Тип данных для категории
-export interface Category {
-  id: string
-  name: string
-  image: string
-}
-
-export interface CategoryInfo {
-  name: string
-  count: number
-  next: string
-  previous: string
-  results: Category[]
-}
diff --git a/src/pages/CategoryPage/CategoryPage.module.scss b/src/pages/CategoryPage/CategoryPage.module.scss
index 8115ba6c..73cdb92c 100644
--- a/src/pages/CategoryPage/CategoryPage.module.scss
+++ b/src/pages/CategoryPage/CategoryPage.module.scss
@@ -2,12 +2,13 @@
 
 .category-page {
   width: 100%;
-  margin-left: 15px;
 }
 
 .category-page__title {
   margin-top: 24px;
   margin-bottom: 10px;
+  font-size: 25px;
+  line-height: 1.15;
 }
 
 .category-page__nav {
@@ -17,5 +18,8 @@
 }
 
 .category-page__subtiitle {
-  margin-bottom: 30px;
+  margin: 30px 0;
+  color: var.$black;
+  font-size: 20px;
+  line-height: 1.15;
 }
diff --git a/src/pages/CategoryPage/CategoryPage.tsx b/src/pages/CategoryPage/CategoryPage.tsx
index a6321779..1aeb47e1 100644
--- a/src/pages/CategoryPage/CategoryPage.tsx
+++ b/src/pages/CategoryPage/CategoryPage.tsx
@@ -1,24 +1,28 @@
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading from '@/shared/ui/Heading/Heading'
-import Paragraph from '@/shared/ui/Paragraph/Paragraph'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
 import CategoryCardList from '@/widgets/CategoryCardList/CategoryCardList'
-import NavigationLink from '@/widgets/NavigationLink/NavigationLink'
 
 import styles from './CategoryPage.module.scss'
 
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Все категории', href: '' }
+]
+
 /**
  * Страница всех категорий
  */
-
 export const CategoryPage = () => {
   return (
-    <div className={styles['category-page']}>
-      <Heading className={styles['category-page__title']}>Все категории</Heading>
-      <div className={styles['category-page__nav']}>
-        <NavigationLink label={'Главная'} to={'/'} />
-        <Paragraph> / Все категории</Paragraph>
+    <WrapperForMainContent>
+      <div className={styles['category-page']}>
+        <Heading className={styles['category-page__title']}>Все категории</Heading>
+        <Breadcrumbs links={links} />
+        <Subheading className={styles['category-page__subtiitle']}>Категории</Subheading>
+        <CategoryCardList />
       </div>
-      <Paragraph className={styles['category-page__subtiitle']}>Категории</Paragraph>
-      <CategoryCardList />
-    </div>
+    </WrapperForMainContent>
   )
 }
diff --git a/src/widgets/CategoryCardList/CategoryCardList.module.scss b/src/widgets/CategoryCardList/CategoryCardList.module.scss
index 53f3cf73..9e406194 100644
--- a/src/widgets/CategoryCardList/CategoryCardList.module.scss
+++ b/src/widgets/CategoryCardList/CategoryCardList.module.scss
@@ -1,9 +1,9 @@
-.categoryCardList{
-    margin-right: 24px;
-    display: grid;
-    justify-content: center;
-    row-gap: 19px;
-    column-gap: 19px;
-    grid-template-columns: repeat(auto-fit, 255px);
-    margin-bottom: 115px;
-}
\ No newline at end of file
+.categoryCardList {
+  margin-top: 24px;
+  display: grid;
+  justify-content: space-between;
+  row-gap: 19px;
+  column-gap: 19px;
+  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
+  margin-bottom: 115px;
+}