render(
  <Box width="100%">
    <PageHeader>
      <PageTitle>People</PageTitle>
    </PageHeader>
    <PageBody
      sidebar={
        <Sidebar grow={0}>
          <Sidebar.Item active>Item 1</Sidebar.Item>
          <Sidebar.Item>Item 2</Sidebar.Item>
          <Sidebar.Item>Item 3</Sidebar.Item>
        </Sidebar>
      }
    >
      Regular body
    </PageBody>
  </Box>
)

render(
  <Box width="100%">
    <PageHeader
      toolbar={
        <PageToolbar>
          <PageTitle>People</PageTitle>
          <PageActions>
            <PageButton title="One" />
            <PageButton title="Two" />
          </PageActions>
        </PageToolbar>
      }
    />
    <PageBody
      sidebar={
        <Sidebar grow={0}>
          <Sidebar.Item active>Item 1</Sidebar.Item>
          <Sidebar.Item>Item 2</Sidebar.Item>
          <Sidebar.Item>Item 3</Sidebar.Item>
        </Sidebar>
      }
    >
      Regular body
    </PageBody>
  </Box>
)

render(
  <Box width="100%">
    <PageHeader
      toolbar={
        <PageToolbar>
          <PageTabList>
            <PageTab active>My Schedule</PageTab>
            <PageTab>All Plans</PageTab>
          </PageTabList>
          <PageActions>
            <PageButton title="One" />
            <PageButton title="Two" />
          </PageActions>
        </PageToolbar>
      }
    >
      <PageTitle>People</PageTitle>
    </PageHeader>
    <PageBody
      sidebar={
        <Sidebar grow={0}>
          <Sidebar.Item active>Item 1</Sidebar.Item>
          <Sidebar.Item>Item 2</Sidebar.Item>
          <Sidebar.Item>Item 3</Sidebar.Item>
        </Sidebar>
      }
    >
      Regular body
    </PageBody>
  </Box>
)

render(
  <Box width="100%">
    <PageHeader
      toolbar={
        <PageToolbar>
          <PageTabList>
            <PageTab active>My Schedule</PageTab>
            <PageTab>All Plans</PageTab>
          </PageTabList>
        </PageToolbar>
      }
    >
      <StackView axis="horizontal" alignment="center" spacing={2}>
        <Icon name="general.person" size="xxl" color="white" />
        <StackView>
          <Heading level={5} color="light-7">
            Steingard Tests > Sunday
          </Heading>
          <Heading color="light-8">Dave's Band Tag Teams</Heading>
        </StackView>
      </StackView>
    </PageHeader>
    <PageBody
      inset
      sidebar={
        <Sidebar grow={0}>
          <Sidebar.Item active>Item 1</Sidebar.Item>
          <Sidebar.Item>Item 2</Sidebar.Item>
          <Sidebar.Item>Item 3</Sidebar.Item>
        </Sidebar>
      }
    >
      Inset body with tabs
    </PageBody>
  </Box>
)

render(
  <Box width="100%">
    <ThemeProvider
      theme={{
        pageHeader: { backgroundColor: 'primary-lighter' },
        pageTitle: { color: 'primary-dark' },
      }}
    >
      <PageHeader
        toolbar={
          <PageToolbar>
            <PageTitle>People</PageTitle>
          </PageToolbar>
        }
      />
    </ThemeProvider>
    <PageBody
      sidebar={
        <Sidebar grow={0}>
          <Sidebar.Item active>Item 1</Sidebar.Item>
          <Sidebar.Item>Item 2</Sidebar.Item>
          <Sidebar.Item>Item 3</Sidebar.Item>
        </Sidebar>
      }
    >
      Regular body
    </PageBody>
  </Box>
)