Header

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

Демо данные
const logo = {
href: '#',
};
const lkSelect = {
title: 'МегаФон Таргет',
items: [
{
id: 1,
title: 'Корпоративный ЛК 1',
href: '#',
target: '_blank',
rel: 'noreferrer',
},
{
id: 2,
title: 'Корпоративный ЛК 2',
renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
},
{
id: 3,
title: 'Корпоративный ЛК 3',
onClick: () => undefined,
},
],
actions: [
{
id: 4,
title: 'Редактировать список',
onClick: () => undefined,
},
],
};
const finance = {
balance: {
title: 'Баланс',
value: '11 783 ₽',
},
bonuses: {
title: 'Бонусы',
value: '10 000',
},
};
const favorites = {
title: 'Избранные действия',
items: [
{
id: 1,
title: 'Создать кампанию',
renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
},
{
id: 2,
title: 'Создать группу клиентов',
onClick: () => undefined,
},
{
id: 3,
title: 'Создать имя отправителя',
href: '#',
},
],
actions: [
{
id: 4,
title: 'Редактировать список',
onClick: () => undefined,
},
],
};
const support = {
items: [
{
id: 1,
title: 'Чат с поддержкой',
renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
},
{
id: 2,
title: 'Оцените личный кабинет',
href: '#',
},
],
info: [
{
title: 'Клиентская служба ',
subtitle: '8 800 550-08-03',
},
],
};
const account = {
title: 'Татьяна Восьмиглазова',
subtitle: 'ООО «Трудовые резервы»',
items: [
{
id: 1,
title: 'Профиль',
onClick: () => undefined,
},
{
id: 2,
title: 'Баланс',
renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
},
{
id: 3,
title: 'Сервисы МегаФона',
href: '#',
},
],
actions: [
{
id: 4,
title: 'Выйти',
onClick: () => undefined,
},
],
};

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


      <Header 
          logo={logo}
          lkSelect={lkSelect}
          account={account}
      />
  

Полный набор виджетов


      <Header 
          logo={logo}
          lkSelect={lkSelect}
          finance={finance}
          support={support}
          favorites={favorites}
          account={account}
      />