1
<Canvas ctx={ctx}>
2
  <Toolbar>
3
    <ToolbarStack stackSize="l">
4
      <ToolbarTitle>Media Area</ToolbarTitle>
5
    </ToolbarStack>
6
  </Toolbar>
7
  <div
8
    style={{
9
      display: 'flex',
10
      justifyContent: 'center',
11
      alignItems: 'center',
12
      background: 'var(--light-bg-color)',
13
      height: '150px',
14
    }}
15
  >
16
    Main content
17
  </div>
18
</Canvas>

1
<Canvas ctx={ctx}>
2
  <Toolbar>
3
    <ToolbarButton>
4
      <BackIcon />
5
    </ToolbarButton>
6
    <ToolbarStack stackSize="l">
7
      <ToolbarTitle>Media Area</ToolbarTitle>
8
      <div style={{ flex: '1' }} />
9
      <Button buttonType="primary">Action</Button>
10
    </ToolbarStack>
11
    <ToolbarButton>
12
      <SidebarLeftArrowIcon />
13
    </ToolbarButton>
14
  </Toolbar>
15
  <div
16
    style={{
17
      display: 'flex',
18
      justifyContent: 'center',
19
      alignItems: 'center',
20
      background: 'var(--light-bg-color)',
21
      height: '150px',
22
    }}
23
  >
24
    Main content
25
  </div>
26
</Canvas>

1
<Canvas ctx={ctx}>
2
  <Toolbar>
3
    <ToolbarStack stackSize="l">
4
      <ToolbarTitle>Media Area</ToolbarTitle>
5
      <div style={{ flex: '1' }} />
6
      <ButtonGroup>
7
        <ButtonGroupButton>First</ButtonGroupButton>
8
        <ButtonGroupButton selected>Second</ButtonGroupButton>
9
        <ButtonGroupButton>Third</ButtonGroupButton>
10
      </ButtonGroup>
11
    </ToolbarStack>
12
  </Toolbar>
13
  <div
14
    style={{
15
      display: 'flex',
16
      justifyContent: 'center',
17
      alignItems: 'center',
18
      background: 'var(--light-bg-color)',
19
      height: '150px',
20
    }}
21
  >
22
    Main content
23
  </div>
24
</Canvas>