Merge pull request #104 from Studio-Yandex-Practicum/bugfix/svg-repla…

…cement

#88 Убрать из верстки svg

src/components/ArticleBlock/ArticleBlock.tsx

@@ -1,4 +1,5 @@
 import description from '@/assets/images/articleBlock/description.png'
+import Arrow from '@/assets/images/articleBlock/arrow.svg'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import ArrowReadNext from '@/assets/icons/ArrowReadNext.svg'
@@ -19,7 +20,6 @@ function ArticleBlock() {
           <Paragraph className={styles.text}>
             Необходимость определять схожесть двух фраз возникла при решении одной небольшой практической
           </Paragraph>
-
           <Link to="#" className={styles.link}>
             <p className={styles.text}>Читать дальше</p>
             <ArrowReadNext />

src/components/BlogMain/BlogMain.tsx

@@ -15,7 +15,7 @@ const BlogMain: FC<PropsBlog> = props => {
   const [items, setItems] = useState(cards)
   const [itemNumber, setItemNumber] = useState(9)
   const [currentPage, setCurrentPage] = useState(1)
-  const TOTAL_PAGES: number = Math.round(items.length / itemNumber)
+  const TOTAL_PAGES: number = Math.ceil(items.length / itemNumber)
   const filterCategories = (curcat?: string) => {
     const newItems = cards.filter(newVal => {
       return newVal.category === curcat
@@ -57,7 +57,7 @@ const BlogMain: FC<PropsBlog> = props => {
         <section className={styles.wrapper}>
           <BlogMainItem />
           <ul>
-            {items.slice(0, itemNumber).map(item => (
+            {items.slice(currentPage == 1 ? 0 : itemNumber * (currentPage - 1), itemNumber * currentPage).map(item => (
               <BlogItemForContainer key={item.id} card={item} />
             ))}
           </ul>

src/components/BlogMainItem/BlogMainItem.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useMemo } from 'react'
+import styles from './blog-main-item.module.scss'
 import { blogMainItemData } from '@/mockData/blogMainItemData'
+import { useEffect, useMemo } from 'react'
 import ViewIcon from '@/assets/images/blogMainItem/icon-views.svg'
 import CommentIcon from '@/assets/images/blogMainItem/icon-comments.svg'
 import DotIcon from '@/assets/images/blogMainItem/icon-dot.svg'

src/components/CardPreviewHeader/CardPreviewHeader.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import classnames from 'classnames'
-import IconCompare from '@/assets/icons/IconCompare'
+import IconCompare from '@/assets/icons/IconCompare.svg'
 import IconLike from '@/assets/icons/IconLike'
 import styles from './CardPreviewHeader.module.scss'
 import { Button, ButtonSize } from '@/shared/ui/Button/Button'
@@ -39,7 +39,7 @@ export const CardPreviewHeader: FC<TCardPreviewHeader> = ({
         </Button>
         <Button size={ButtonSize.XS} className={styles['button']} onClick={handleAddToCompared}>
           <IconCompare
-            styles={classnames(styles.icon, {
+            className={classnames(styles.icon, {
               [styles['active']]: isInCompared
             })}
           />

src/components/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import classnames from 'classnames'
+
 import { ECardView } from '@/shared/model/types/common'
 import IconCompare from '@/assets/icons/IconCompare'
 import IconLike from '@/assets/icons/IconLike'
@@ -44,7 +45,7 @@ export const WidgetButtonsFunctions: FC<TWidgetButtonsFunctions> = ({
           [getStylesForCurrentLayout('customButton', stylesSvg)[layout]]: layout
         })}>
         <IconCompare
-          styles={classnames(styles['product-card__icon'], {
+          className={classnames(styles['product-card__icon'], {
             [styles['product-card__icon_active']]: isInCompared
           })}
         />

src/components/header/header.tsx

@@ -4,6 +4,7 @@ import Logo from '../logo/Logo'
 import Search from '../search/search'
 import ArrowIcon from '@/assets/icons/arrow.svg'
 import LightningIcon from '@/assets/images/header/lightning.svg'
+import AllCategoriesIcon from '@/assets/images/header/all-categories.svg'
 import ContextMenuElement from '../ContextMenuElement/ContextMenuElement'
 import HeaderAccount from '../HeaderAccount/HeaderAccount'
 import { PHONE_NUMBER } from '@/shared/constants/constants'
@@ -158,11 +159,12 @@ function Header() {
 
         <div className={styles['header__row-three']}>
           <ContextMenuElement content={catalogNode}>
+
             {/* @TODO: вставить путь когда будет роут */}
             <CatalogLink to="" className={styles['header__catalog-link_main']}>
               <div className={styles['header__catalog-wrapper']}>
                 <IconCategories className={styles['header__svg']} />
-                <p className={styles['header__catalog-text']}>Все категории</p>
+                <p className={styles['header__catalog-text']}>Все категории</p
               </div>
             </CatalogLink>
           </ContextMenuElement>

src/mockData/blogPageData.ts

@@ -1,12 +1,12 @@
 import Img1 from '@/assets/images/blogPage/img-blog-02.png'
 import Img2 from '@/assets/images/blogPage/img-blog-03.png'
 import Img3 from '@/assets/images/blogPage/img-blog-04.png'
-import Img4 from '@/assets/images/blogPage/img-blog-05.svg'
-import Img5 from '@/assets/images/blogPage/img-blog-06.svg'
-import Img6 from '@/assets/images/blogPage/img-blog-07.svg'
-import Img7 from '@/assets/images/blogPage/img-blog-08.svg'
-import Img8 from '@/assets/images/blogPage/img-blog-09.svg'
-import Img9 from '@/assets/images/blogPage/img-blog-10.svg'
+import Img4 from '@/assets/images/blogPage/img-blog-05.webp'
+import Img5 from '@/assets/images/blogPage/img-blog-06.webp'
+import Img6 from '@/assets/images/blogPage/img-blog-07.webp'
+import Img7 from '@/assets/images/blogPage/img-blog-08.webp'
+import Img8 from '@/assets/images/blogPage/img-blog-09.webp'
+import Img9 from '@/assets/images/blogPage/img-blog-10.webp'
 import Img10 from '@/assets/images/blogPage/image10.webp'
 
 export const blogPageData = [