Tabs

<Tabs
  panes={[
    {
      menuItem: 'Оборудование',
      pane: 'Информация о доступном оборудовании',
    },
    {
      menuItem: 'События',
      pane: 'Информация о предстоящих событиях',
    },
    {
      menuItem: 'Модель данных',
      pane: 'Информация о моделях данных',
    },
    {
      menuItem: 'График',
      pane: 'Информация о графиках',
    },
    {
      menuItem: 'Документация',
      pane: 'Документация проекта',
    },
  ]}
  renderActiveOnly={false}
/>

<Tabs
  panes={[
    {
      menuItem: {
        key: 0,
        content: 'Оборудование',
        disabled: false,
      },
      render: () => <div>Информация о доступном оборудовании</div>,
    },
    {
      menuItem: {
        key: 1,
        content: 'События',
        disabled: true,
      },
      render: () => <div>Информация о предстоящих событиях</div>,
    },
    {
      menuItem: {
        key: 2,
        content: 'Модель данных',
        disabled: false,
      },
      render: () => <div>Информация о моделях данных</div>,
    },
    {
      menuItem: {
        key: 3,
        content: 'График',
        disabled: true,
      },
      render: () => <div>Информация о графиках</div>,
    },
    {
      menuItem: {
        key: 4,
        content: 'Документация',
        disabled: false,
      },
      render: () => <div>Документация проекта</div>,
    },
  ]}
/>

<Tabs
  onTabChange={(e, { activeIndex, panes }) =>
    console.log(
      `Active pane object looks like: ${JSON.stringify(panes[activeIndex])}`,
    )
  }
  panes={[
    {
      menuItem: 'Оборудование',
      pane: 'Информация о доступном оборудовании',
    },
    {
      menuItem: 'События',
      pane: 'Информация о предстоящих событиях',
    },
    {
      menuItem: 'Модель данных',
      pane: 'Информация о моделях данных',
    },
    {
      menuItem: 'График',
      pane: 'Информация о графиках',
    },
    {
      menuItem: 'Документация',
      pane: 'Документация проекта',
    },
  ]}
  renderActiveOnly={false}
/>