Figma

ContentView

import { ContentView } from '@megafon/ui-core';

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

<ContentView title="Что-то пошло не так" type="error" buttonParams={{ text: 'Обновить' }} />

С текстом и ссылкой

<ContentView
  title="Что-то пошло не так"
  type="error"
  buttonParams={{ text: 'Обновить' }}
  linkParams={{ text: 'Перейти' }}
>
  Нажмите кнопку или зайдите позже
</ContentView>

С кнопкой и лоадером и отключенной ссылкой

<ContentView
  title="Что-то пошло не так"
  type="error"
  buttonParams={{ text: 'Обновить', showLoader: true }}
  linkParams={{ text: 'Перейти', disabled: true }}
>
  Нажмите кнопку или зайдите позже
</ContentView>

Тип встроенного изображения

<DemoContentViewWrapper>
  {imageType => (
      <ContentView title={"Тип " + imageType} buttonParams={{ text: 'Обновить' }} type={imageType}>
          Нажмите кнопку или зайдите позже
      </ContentView>
  )}
</DemoContentViewWrapper>

Код DemoContentViewWrapper
export const DemoContentViewWrapper: React.FC = ({ children }: { children: (imageType: string) => void }) => {
    const imageTypes = ['alarm', 'empty', 'error', 'fail', 'searchNoResult', 'submit', 'success', 'update', 'waiting'];


    return (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '80px' }}>
            {imageTypes.map(imageType => children(imageType))}
        </div>
    );
};

С кастомным изображением

<ContentView
  title="Что-то пошло не так"
  buttonParams={{ text: 'Обновить' }}
  linkParams={{ text: 'Перейти' }}
  src={smallImg}
>
  Нажмите кнопку или зайдите позже
</ContentView>

Полноэкранный режим

<div style={{ height: '500px' }}>
  <ContentView
      title="Что-то пошло не так"
      type="error"
      buttonParams={{ text: 'Обновить' }}
      linkParams={{ text: 'Перейти' }}
      isFullscreen
  >
      Нажмите кнопку или зайдите позже
  </ContentView>
</div>

С html-тегами

<ContentView
      title="Что-то пошло<br />не так"
      type="error"
  >
      Нажмите кнопку<br />или зайдите позже
  </ContentView>