#141-enhancement-changed-component-NewsBlock-to-fsd

src/entities/NewsCard/NewsCard.module.scss

@@ -0,0 +1,51 @@
+@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;
+  }
+
+  h3 {
+    width: 95%;
+    font-size: #{'min(max(14px, 1.2vw), 16px)'};
+    line-height: 150%;
+    font-weight: 500;
+  }
+
+  &:hover h3 {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+
+  .promo {
+    display: inline-block;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background: var.$promo-color;
+    border-radius: 5px;
+    padding: 5px 10px;
+    color: var.$white;
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+  }
+}

src/entities/NewsCard/NewsCard.stories.tsx

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

src/entities/NewsCard/NewsCard.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+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'
+
+export type Props = {
+  card: TCard
+}
+
+/**
+ * Карточка из блока группы новостей
+ * @param {TCard} card - параметры карточки из группы новостей
+ */
+
+const NewsCard: FC<Props> = ({ card }) => {
+  return (
+    <Link to={''} className={styles.card}>
+      <img src={card.src} alt={card.alt} draggable="false" />
+      <h3>{card.title}</h3>
+      <span>{card.date}</span>
+      {card.promo ? <span className={styles.promo}>{TEXT_PROMO}</span> : null}
+    </Link>
+  )
+}
+
+export default NewsCard

src/models/SvgModel.ts

@@ -1,3 +1,4 @@
 export type TProps = {
   styles?: Array<string> | string
+  className?: string
 }

src/pages/MainPage/MainPage.tsx

@@ -1,23 +1,21 @@
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import ContainerCards from '@/components/ContainerCards/ContainerCards'
 import SliderBlock from '@/components/SliderBlock/SliderBlock'
 import BrandsBlock from '@/widgets/BrandBlock/BrandBlock'
 import { storiesData } from '@/mockData/storiesData'
 import { blogData } from '@/mockData/blogData'
-import { newsData } from '@/mockData/newsData'
 import {
   TEXT_STORIES,
   TEXT_BLOG,
-  TEXT_NEWS,
   LINK_SHOW_ALL,
-  LINK_NEWS_ALL,
   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'
 
 const MainPage = () => {
   return (
@@ -26,7 +24,7 @@ const MainPage = () => {
       <WrapperForMainContent>
         <ContainerCards title={TEXT_STORIES} cards={storiesData} />
         <ContainerCards title={TEXT_BLOG} linkText={LINK_SHOW_ALL} cards={blogData} />
-        <ContainerCards title={TEXT_NEWS} linkText={LINK_NEWS_ALL} cards={newsData} />
+        <NewsBlock />
         <CategoryGrid />
         <ReviewsBlock title={TEXT_CUSTOMERS_ABOUT_US} linkText={LINK_REVIEWS_ALL} />
         <BrandsBlock />

src/shared/ui/Scroll/Scroll.module.scss

@@ -0,0 +1,33 @@
+@use '@/app/styles/index' as var;
+
+.extra {    
+    background-color: orange;
+    min-width: 200px;
+}
+
+.additional {
+    width: 1000px;
+    height: 100px;
+}
+
+.scroll {
+    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/shared/ui/Scroll/Scroll.stories.tsx

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

src/shared/ui/Scroll/Scroll.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react'
+import styles from './Scroll.module.scss'
+
+export type TProps = {
+  className?: string
+  children: React.ReactNode
+}
+
+/**
+ * Scrollbar
+ * @param {string} className - для дополнительных свойств
+ * @param {React.ReactNode} children - элементы внутри компонента
+ */
+const Scroll: FC<TProps> = ({ className, children }) => {
+  return <div className={`${styles.scroll} ${className}`}>{children}</div>
+}
+
+export default Scroll

src/widgets/NewsBlock/ui/NewsBlock.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/NewsBlock/ui/NewsBlock.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import styles from './NewsBlock.module.scss'
+import { FC } from 'react'
+import NewsBlock from './NewsBlock'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <div className={styles.storybook}>
+      <NewsBlock />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'widgets/NewsBlock',
+  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/NewsBlock/ui/NewsBlock.tsx

@@ -0,0 +1,32 @@
+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 './NewsBlock.module.scss'
+import NewsCard from '@/entities/NewsCard/NewsCard'
+import { newsData } from '@/mockData/newsData'
+import Scroll from '@/shared/ui/Scroll/Scroll'
+
+/**
+ * Блок группы новостей
+ */
+const NewsBlock: 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>
+        {newsData.map(item => (
+          <NewsCard key={item.id} card={item} />
+        ))}
+      </Scroll>
+    </section>
+  )
+}
+
+export default NewsBlock