#199-enhancement-changed-BlogBlock-to-fsd

src/entities/BlogCard/BlogCard.module.scss

@@ -0,0 +1,36 @@
+@use '@/app/styles/index' as var;
+
+.card {
+  min-width: 340px;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;  
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;      
+  }
+
+  img {
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+  }
+
+  .heading 
+  {
+      font-size: #{'min(max(14px, 1.2vw), 16px)'};
+  }
+
+  &:hover .heading {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+
+}

src/entities/BlogCard/BlogCard.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import BlogCard from './BlogCard'
+import Img1 from '@/assets/images/blog/img-blog-01.png'
+
+const meta = {
+  title: 'entities/BlogCard',
+  component: BlogCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof BlogCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: {
+      id: 1,
+      src: Img1,
+      alt: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      title: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      date: '8 Мая, 2022'
+    }
+  }
+}

src/entities/BlogCard/BlogCard.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+import { TCard } from '@/models/CardModel'
+import styles from './BlogCard.module.scss'
+import Link from '@/shared/ui/Link/Link'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+
+export type Props = {
+  card: TCard
+}
+
+/**
+ * Карточка из блока блог
+ * @param {TCard} card - параметры карточки из блога
+ */
+
+const BlogCard: FC<Props> = ({ card }) => {
+  return (
+    <Link to={''} className={styles.card}>
+      <img src={card.src} alt={card.alt} draggable="false" />
+      <Heading type={HeadingType.NORMAL} className={styles.heading}>
+        {card.title}
+      </Heading>
+      <span>{card.date}</span>
+    </Link>
+  )
+}
+
+export default BlogCard

src/entities/NewsCard/NewsCard.module.scss

@@ -20,14 +20,12 @@
     scroll-snap-align: start;
   }
 
-  h3 {
-    width: 95%;
-    font-size: #{'min(max(14px, 1.2vw), 16px)'};
-    line-height: 150%;
-    font-weight: 500;
+  .heading 
+  {
+      font-size: #{'min(max(14px, 1.2vw), 16px)'};
   }
 
-  &:hover h3 {
+  &:hover .heading {
     color: var.$link-color;
   }
 

src/entities/NewsCard/NewsCard.tsx

@@ -3,6 +3,7 @@ import { TCard } from '@/models/CardModel'
 import { TEXT_PROMO } from '@/shared/constants/constants'
 import styles from './NewsCard.module.scss'
 import Link from '@/shared/ui/Link/Link'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 
 export type Props = {
   card: TCard
@@ -17,7 +18,9 @@ const NewsCard: FC<Props> = ({ card }) => {
   return (
     <Link to={''} className={styles.card}>
       <img src={card.src} alt={card.alt} draggable="false" />
-      <h3>{card.title}</h3>
+      <Heading type={HeadingType.NORMAL} className={styles.heading}>
+        {card.title}
+      </Heading>
       <span>{card.date}</span>
       {card.promo ? <span className={styles.promo}>{TEXT_PROMO}</span> : null}
     </Link>

src/pages/MainPage/MainPage.tsx

@@ -2,28 +2,22 @@ import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperFor
 import SliderBlock from '@/components/SliderBlock/SliderBlock'
 import BrandsBlock from '@/widgets/BrandBlock/BrandBlock'
 import { storiesData } from '@/mockData/storiesData'
-import { blogData } from '@/mockData/blogData'
-import {
-  TEXT_STORIES,
-  TEXT_BLOG,
-  LINK_SHOW_ALL,
-  TEXT_CUSTOMERS_ABOUT_US,
-  LINK_REVIEWS_ALL
-} from '@/shared/constants/constants'
+import { TEXT_STORIES, TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants'
 import ArticleBlock from '@/components/ArticleBlock/ArticleBlock'
 import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid'
 import ReviewsBlock from '@/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
 import NewsBlock from '@/widgets/NewsBlock/ui/NewsBlock'
 import ContainerCards from '@/components/ContainerCards/ContainerCards'
+import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock'
 
 const MainPage = () => {
   return (
     <>
       <SliderBlock />
       <WrapperForMainContent>
         <ContainerCards title={TEXT_STORIES} cards={storiesData} />
-        <ContainerCards title={TEXT_BLOG} linkText={LINK_SHOW_ALL} cards={blogData} />
+        <BlogBlock />
         <NewsBlock />
         <CategoryGrid />
         <ReviewsBlock title={TEXT_CUSTOMERS_ABOUT_US} linkText={LINK_REVIEWS_ALL} />

src/widgets/BlogBlock/ui/BlogBlock.module.scss

@@ -0,0 +1,65 @@
+@use '@/app/styles/index' as var;
+
+.storybook {
+  width: 1080px;
+}
+
+.wrapper {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+
+  h2 {
+    font-size: #{'min(max(18px, 1.6vw), 20px)'};
+    line-height: 115%;
+    font-weight: 500;
+  }
+
+  article {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0 10px;
+  }
+
+  .link {
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .svg {
+    width: 1.25rem;
+    height: 0.5625rem;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
+
+  ul {
+    display: flex;
+    gap: 20px;
+    padding: 0 10px 20px;
+    overflow: auto hidden;
+    cursor: grab;
+
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var.$theme-primary-color;
+      cursor: grab;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
+}

src/widgets/BlogBlock/ui/BlogBlock.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import styles from './BlogBlock.module.scss'
+import { FC } from 'react'
+import BlogBlock from './BlogBlock'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <div className={styles.storybook}>
+      <BlogBlock />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'widgets/BlogBlock',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/widgets/BlogBlock/ui/BlogBlock.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import IconLink from '@/assets/icons/IconLink'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Link from '@/shared/ui/Link/Link'
+import styles from './BlogBlock.module.scss'
+import Scroll from '@/shared/ui/Scroll/Scroll'
+import { blogData } from '@/mockData/blogData'
+import BlogCard from '@/entities/BlogCard/BlogCard'
+
+/**
+ * Блок группы карточек блога
+ */
+
+const BlogBlock: FC = () => {
+  return (
+    <section className={styles.wrapper}>
+      <article>
+        <Heading type={HeadingType.NORMAL}>Блог</Heading>
+        <Link to={'#'} className={styles.link}>
+          Показать все
+          <IconLink styles={styles.svg}></IconLink>
+        </Link>
+      </article>
+      <Scroll>
+        {blogData.map(item => (
+          <BlogCard key={item.id} card={item} />
+        ))}
+      </Scroll>
+    </section>
+  )
+}
+
+export default BlogBlock