render(
  <StackView backgroundColor="primary" width="100%">
    <StackView padding={3}>
      <Text color="white">Resource header content</Text>
    </StackView>
    <TabNav
      tabs={[
        { isSelected: true, label: 'Selected tab' },
        { label: 'Tab with icon', iconLeft: 'general.check' },
        { disabled: true, label: 'Disabled tab' },
        { badge: '31', label: 'Tab with badge' },
      ]}
    />
    <StackView backgroundColor="white" padding={3}>
      <Text>Rest of page</Text>
    </StackView>
  </StackView>
)

render(
  <StackView backgroundColor="primary" width="100%">
    <StackView padding={3}>
      <Text color="white">Resource header content</Text>
    </StackView>
    <TabNav
      selectedTabBackgroundColor="grey-1"
      tabs={[
        {
          label: 'Tab with left icon',
          iconLeft: 'general.star',
        },
        {
          label: 'Tab with right icon',
          iconRight: {
            color: 'warning',
            name: 'general.exclamationTriangle',
          },
          isSelected: true,
        },
        {
          label: 'All the icons',
          iconLeft: 'general.check',
          iconRight: 'general.celebrate',
        },
      ]}
    />
    <StackView backgroundColor="grey-1" padding={3}>
      <Text>Rest of page (with non-white background)</Text>
    </StackView>
  </StackView>
)

function App() {
  const [activeTab, setActiveTab] = React.useState('first')
  return (
    <StackView backgroundColor="primary" width="100%">
      <StackView padding={3}>
        <Text color="white">Controlled Tab Nav</Text>
      </StackView>
      <TabNav
        tabs={[
          {
            isSelected: activeTab === 'first',
            label: 'First tab',
            onClick: () => setActiveTab('first'),
          },
          {
            isSelected: activeTab === 'second',
            label: 'Second tab',
            onClick: () => setActiveTab('second'),
          },
        ]}
      />
      <StackView backgroundColor="white" padding={3}>
        {activeTab === 'first' && <Text>First tab content</Text>}
        {activeTab === 'second' && <Text>Second tab content</Text>}
      </StackView>
    </StackView>
  )
}
render(App)