App.js

import React from 'react';
import { Pane, Paragraph, Tablist, SidebarTab, Alert, Avatar, Button, LogOutIcon, IconButton, Heading } from 'evergreen-ui';

class AppMainPage extends React.Component {

  state = {
    selectedIndex: 0,
    tabs: ['Traits', 'Event History', 'Identities'],
    showAlert: true
  }

  render() {
    return(
      <div className="App">
        <Pane display="flex" padding={16} background="tint2" borderRadius={3}>
          <Pane flex={1} alignItems="center" display="flex">
            <Heading size={600}>hunter alpha</Heading>
          </Pane>
          <Pane><Avatar name="user1" marginRight={16} marginTop={4} isSolid /></Pane>
          <Pane><IconButton icon={LogOutIcon} marginTop={1} appearance="minimal">Log out</IconButton></Pane>
        </Pane>

        <Pane display="flex" padding={16} flexDirection="column">
          <Alert appearance="card" intent="none" title="42 new leads for you to review">
            since your last logon on 07/23/20
          </Alert>
        </Pane>

        <Pane display="flex" padding={16} height={240}>
          <Tablist marginBottom={16} flexBasis={240} marginRight={24}>
            {this.state.tabs.map((tab, index) => (
              <SidebarTab
                key={tab}
                id={tab}
                onSelect={() => this.setState({ selectedIndex: index })}
                isSelected={index === this.state.selectedIndex}
                aria-controls={`panel-${tab}`}
              >
                {tab}
              </SidebarTab>
            ))}
          </Tablist>
          <Pane padding={16} background="tint1" flex="1">
            {this.state.tabs.map((tab, index) => (
              <Pane
                key={tab}
                id={`panel-${tab}`}
                role="tabpanel"
                aria-labelledby={tab}
                aria-hidden={index !== this.state.selectedIndex}
                display={index === this.state.selectedIndex ? 'block' : 'none'}
              >
                <Paragraph>Panel {tab}</Paragraph>
              </Pane>
            ))}
          </Pane>
        </Pane>

        <Pane display="flex" padding={16}>
          <Button>hi</Button>
        </Pane>
      </div>
    );
  }
}

export default AppMainPage;