Merge pull request #258 from Studio-Yandex-Practicum/development-257-…

…BannerBlock

#257-development-BannerBlock-done

src/entities/BannerCard/BannerCard.module.scss

@@ -0,0 +1,50 @@
+@use '@/app/styles/index' as color;
+@use '../../shared/styles/utils/mixins' as media;
+
+.storybook {
+  width: 900px;
+  height: 400px;  
+}
+
+.slider { 
+  flex: 1 0 100%;
+  position: relative;
+  background-color: color.$theme-secondary-color;
+}
+
+.link {
+  color: color.$black;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  .content {
+    position: absolute;
+    left: 12%;
+    top: 100px;
+
+    @include media.respond-to('middle') {
+      left: 39%;
+      top: 5%;
+    }
+
+    .title {
+      margin-top: 5px;
+      font-size: 30px;      
+      color: color.$black;
+      line-height: 37.5px; 
+    }  
+  }
+}
+
+.button {
+  border: 1px solid color.$body-color-light-grey;
+  column-gap: 15px;
+  background-color: inherit;
+  color: color.$black;
+  margin-top: 30px;
+
+  path {
+    fill: color.$black;
+  }
+}

src/entities/BannerCard/BannerCard.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FC } from 'react'
+
+import img1 from '@/assets/images/banner/banner.png'
+
+import BannerCard, { TBannerCardProps } from './BannerCard'
+import styles from './BannerCard.module.scss'
+
+const StorybookWrapper: FC<TBannerCardProps> = ({ alt, title, subtitle, href, urlImg, urlImg_m }) => {
+  return (
+    <div className={styles.storybook}>
+      <BannerCard
+        urlImg={urlImg}
+        urlImg_m={urlImg_m}
+        alt={alt}
+        title={title}
+        subtitle={subtitle}
+        href={href}
+      />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'entities/BannerCard',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {
+    urlImg: img1,
+    urlImg_m: img1,
+    alt: 'Mobil',
+    title: 'DJI OSMO',
+    subtitle: 'Mobile 4',
+    href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy'
+  }
+}

src/entities/BannerCard/BannerCard.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react'
+
+import ArrowRightNextPage from '@/assets/icons/ArrowRightNextPage.svg'
+import { media } from '@/shared/styles/utils/media'
+import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Link from '@/shared/ui/Link/Link'
+import Img from '@/ui/img'
+
+import styles from './BannerCard.module.scss'
+
+export type TBannerCardProps = {
+  urlImg: string
+  urlImg_m: string
+  alt: string
+  title: string
+  subtitle: string
+  href: string
+}
+
+/**
+ * Entity SliderCard
+ * Карточка для SliderBlock на главной странице.
+ * @param {string} urlImg - изображение
+ * @param {string} urlImg_m - изображение
+ * @param {string} alt - название картинки, если картинка не подгрузится
+ * @param {string} title - название
+ * @param {string} subtitle - название
+ * @param {string} href - ссылка
+ */
+
+const BannerCard: FC<TBannerCardProps> = ({ alt, title, subtitle, href, urlImg, urlImg_m }) => {
+  return (
+    <div className={styles.slider}>
+      <Link to={href} className={styles.link}>
+        <div className={styles.content}>
+          <Heading type={HeadingType.NORMAL} className={styles.title}>
+            {title}
+          </Heading>
+          <Heading type={HeadingType.NORMAL} className={styles.title}>
+            {subtitle}
+          </Heading>
+
+          <Button size={ButtonSize.S} theme={ButtonTheme.PRIMARY} className={styles.button}>
+            Подробнее
+            <ArrowRightNextPage className={styles.icon} />
+          </Button>
+        </div>
+        <Img srcSet={urlImg_m} media={media.middle} src={urlImg} alt={alt} />
+      </Link>
+    </div>
+  )
+}
+
+export default BannerCard

src/mockData/bannerData.ts

@@ -0,0 +1,31 @@
+import img1 from '@/assets/images/banner/banner.png'
+
+export const bannerData = [
+  {
+    id: 100,
+    urlImg: img1,
+    urlImg_m: img1,
+    alt: 'Mobil',
+    title: 'DJI OSMO',
+    subtitle: 'Mobile 4',
+    href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy'
+  },
+  {
+    id: 101,
+    urlImg: img1,
+    urlImg_m: img1,
+    alt: 'Mobil',
+    title: 'DJI OSMO',
+    subtitle: 'Mobile 4',
+    href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy'
+  },
+  {
+    id: 102,
+    urlImg: img1,
+    urlImg_m: img1,
+    alt: 'Mobil',
+    title: 'DJI OSMO',
+    subtitle: 'Mobile 4',
+    href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy'
+  }
+]

src/pages/MainPage/MainPage.tsx

@@ -2,6 +2,7 @@ import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperFor
 import { TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
 import ArticleBlock from '@/widgets/ArticleBlock/ArticleBlock'
+import BannerBlock from '@/widgets/BannerBlock/ui/BannerBlock'
 import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock'
 import BrandsBlock from '@/widgets/BrandBlock/ui/BrandBlock/BrandBlock'
 import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid'
@@ -17,6 +18,7 @@ const MainPage = () => {
       <HeroBlock />
       <WrapperForMainContent>
         <StoriesBlock />
+        <BannerBlock />
         <BlogBlock />
         <NewsBlock />
         <CategoryGrid />

src/widgets/BannerBlock/ui/BannerBlock.module.scss

@@ -0,0 +1,22 @@
+@use '@/app/styles/index' as color;
+@use '../../../shared/styles/utils/mixins' as media;
+
+.storybook {
+  width: 900px;
+  height: 400px;  
+}
+
+  .container {
+    display: flex; 
+    column-gap: 20px;
+    width: 1420px;
+    max-width: 100%;
+    height: 370px;
+    margin: 0 auto;
+    padding: 0 10px;
+
+    @include media.respond-to('middle') {
+      width: 653px;
+      height: 512px;
+    }
+  }

src/widgets/BannerBlock/ui/BannerBlock.stories.tsx

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

src/widgets/BannerBlock/ui/BannerBlock.tsx

@@ -0,0 +1,34 @@
+import BannerCard from '@/entities/BannerCard/BannerCard'
+import Slider from '@/features/Slider/ui/Slider/Slider'
+import { bannerData } from '@/mockData/bannerData'
+
+import styles from './BannerBlock.module.scss'
+
+/**
+ * Component BannerBlock
+ * Компонент для перелистывания главных картинок на главной странице.
+ */
+
+const BannerBlock = () => {
+  return (
+    <div className={styles.container}>
+      <Slider>
+        {bannerData.map(item => {
+          return (
+            <BannerCard
+              key={item.id}
+              urlImg={item.urlImg}
+              urlImg_m={item.urlImg_m}
+              alt={item.alt}
+              title={item.title}
+              subtitle={item.subtitle}
+              href={item.href}
+            />
+          )
+        })}
+      </Slider>
+    </div>
+  )
+}
+
+export default BannerBlock