ContentView

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

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

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

Что-то пошло не так

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

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

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

Что-то пошло не так

Нажмите кнопку или зайдите позже

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

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

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

Тип alarm

Нажмите кнопку или зайдите позже

Тип empty

Нажмите кнопку или зайдите позже

Тип error

Нажмите кнопку или зайдите позже

Тип fail

Нажмите кнопку или зайдите позже

Тип searchNoResult

Нажмите кнопку или зайдите позже

Тип submit

Нажмите кнопку или зайдите позже

Тип success

Нажмите кнопку или зайдите позже

Тип update

Нажмите кнопку или зайдите позже

Тип waiting

Нажмите кнопку или зайдите позже

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

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

Код DemoContentViewWrapperexport 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>

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

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

Что-то пошло не так

Нажмите кнопку или зайдите позже

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

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