CardBig

import { CardBig } from '@megafon/ui-lk-vas';

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

<CardBig
      items={[
          { title: "Title", subtitle: "Subtitle", titleColor: "green" },
          { title: "Title", subtitle: "Subtitle" },
          { title: "Title", subtitle: "Subtitle" },
          { title: "Title", subtitle: "Subtitle" },
          { title: "Title", subtitle: "Subtitle" },
          { type: "switcher", switcherText: "Включить", switcherProps: { checked: false, onChange: handleClick } },
          {
              type: "actions",
              actionsItems: [
                  { iconType: "settings", onClick: handleClick },
                  { iconType: "edit", onClick: handleClick },
                  { iconType: "cancel", onClick: handleClick },
              ]
          },
      ]}
  />
  <CardBig
      isTwoLine
      items={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
  />

Примеры сборки карточек

<div style={{ ...flexStyle, width: '952px'}}>
      <CardBig
          isTwoLine
          items={[
              { title: "Онлайн", subtitle: "Статус", titleColor: "green" },
              { title: "ambassador", subtitle: "Название" },
              { title: "16.02.2023 12:52:34", subtitle: "Последний вход" },
              { title: "121933 с", subtitle: "Время онлайн" },
              { title: "18", subtitle: "Соединение" },
              { title: "0,12 КБ/с", subtitle: "Загрузка" },
              { title: "18", subtitle: "Сеансы" },
              { title: "11", subtitle: "CPU" },
              { title: "6/18", subtitle: "Онлайн" },
              { title: "MikroTik", subtitle: "Поставщик" },
          ]}
      />
      <CardBig
          items={[
              { title: "ambassador", subtitle: "Название" },
              { title: "09:00", subtitle: "Начало" },
              { title: "21:00", subtitle: "Окончание" },
              { title: "121933 с", subtitle: "Время работы" },
              { title: "Картинка", subtitle: "Тип" },
              { type: "switcher", align: "center", switcherText: "Выключить", switcherProps: { checked: true, onChange: handleClick } },
              {
                  type: "actions",
                  align: "center",
                  actionsItems: [
                      { iconType: "edit", onClick: handleClick },
                      { iconType: "cancel", onClick: handleClick },
                  ]
              },
          ]}
      />
  </div>

CardSmall

import { CardSmall } from '@megafon/ui-lk-vas';

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

<CardSmall
      items={[1, 2, 3, 4, 5].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1", onClick: handleClick },
          { title: "Действие 2", onClick: handleClick },
      ]}
      onCloseButtonClick={handleClick}
  />
  <CardSmall
      items={[1, 2, 3, 4].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1 (ссылка)", href: "#" },
          { title: "Действие 2 (ссылка)", href: "#" },
      ]}
      onCloseButtonClick={handleClick}
  />
  <CardSmall
      items={[
          { title: "МегаФон", subtitle: "Название" },
          { title: "По билингу", subtitle: "Авторизация" },
          { title: "1440", subtitle: "Интервал" },
          { title: "https://megafon.ru", subtitle: "Перенаправление" },
          { title: "Label Megafon", subtitle: "Название" },
      ]}
      actionButtons={[
          { title: "Редактировать профиль", onClick: handleClick },
          { title: "Настройки", onClick: handleClick },
      ]}
      onCloseButtonClick={handleClick}
  />
  

Адаптивная карточка

<CardSmall
      isAdaptive
      items={[1, 2, 3].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1", onClick: handleClick },
      ]}
  />
  <CardSmall
      isAdaptive
      items={[1, 2, 3].map(item => ({
          title: "Title",
          subtitle: "Subtitle",
      }))}
      actionButtons={[
          { title: "Действие 1", onClick: handleClick },
      ]}
  />