BlogBox

import { BlogBox } from '@megafon/ui-shared';

Примеры и код

Свойства и методы

Базовое использование

Показаны все 4 статьи (кнопка - опционально)

<BlogBox
      items={[1, 2, 3, 4].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

3 статьи

<BlogBox
      items={[1, 2, 3].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

2 статьи

<BlogBox
      items={[1, 2].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

1 статья

<BlogBox
      items={[{
          date: "20 июля",
          title: "Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
          href: "#",
          image: {
              srcMobile: imageMobile.src,
              srcDesktop: imageDesktop.src,
              srcThumbnail: imageThumbnail.src,
              alt: "blog-box-image",
          },
      }]}
      button={{ title: "Перейти в блог", href: "#" }}
  />

Выравнивание по левому краю

При количестве статей < 3

<BlogBox
      hasAlignLeft
      items={[1, 2].map(item => ({
              date: "20 июля",
              title: item + ". Заголовок максимум в 4 строки далее троеточие, не более 88 символов",
              href: "#",
              image: {
                  srcMobile: imageMobile.src,
                  srcDesktop: imageDesktop.src,
                  srcThumbnail: imageThumbnail.src,
                  alt: "blog-box-image",
          },
      }))}
      button={{ title: "Перейти в блог", href: "#" }}
  />

Prop name	Type	Default	Description
items*	TileDataType[]		Статьи (не более 4, остальные будут проигнорированы)
button	ButtonType		Кнопка
hasAlignLeft	boolean	false	Выравнивание по левому краю (при количестве статей менее трех)
className	string		Дополнительный класс для компонента
classes	{ root?: string; item?: string; button?: string; }		Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string>; list?: Record<string, string>; item?: Record<string, string>; button?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам

type TileDataType = {
    /** Дата */
    date: string;
    /** Заголовок */
    title: string;
    /** Изображение */
    image: ImageType;
    /** Ссылка */
    href: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
};

type TargetType = '_self' | '_blank' | '_parent' | '_top';

type ButtonType = {
    /** Название */
    title: string;
    /** Ссылка */
    href: string;
    /** Атрибут ссылки target */
    target?: Target;
    /** Атрибут ссылки rel */
    rel?: string;
};

type ImageType = {
    /** Изображение на разрешении экрана 0-1023 */
    srcMobile: string;
    /** Изображение на разрешении экрана 1024+ */
    srcDesktop: string;
    /** Миниатюра */
    srcThumbnail: string;
    /** Значение тега alt для изображения */
    alt?: string;
};