forked from blocks/blocks
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathheader.js
More file actions
53 lines (50 loc) · 1.31 KB
/
Copy pathheader.js
File metadata and controls
53 lines (50 loc) · 1.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Code, Layers } from 'react-feather'
import { useEditor } from './editor-context'
import { IconButton } from './ui'
export default () => {
const editorState = useEditor()
console.log(editorState)
return (
<header
sx={{
display: 'flex',
width: '100%',
py: 2,
px: 3,
borderBottom: 'thin solid #e1e6eb'
}}
>
<a href="/" sx={{ mr: 'auto' }}>
<img
alt="Blocks logo"
src="https://user-images.githubusercontent.com/1424573/61592179-e0fda080-ab8c-11e9-9109-166cc7c86b43.png"
sx={{
height: 20,
verticalAlign: 'middle'
}}
/>
</a>
{editorState.mode === 'canvas' ? (
<IconButton
aria-label="View code"
onClick={() => {
editorState.update({ ...editorState, mode: 'code' })
}}
>
<Code size={15} sx={{ position: 'relative', top: '1px' }} />
</IconButton>
) : (
<IconButton
aria-label="View canvas"
onClick={() => {
editorState.update({ ...editorState, mode: 'canvas' })
}}
>
<Layers size={15} sx={{ position: 'relative', top: '1px' }} />
</IconButton>
)}
</header>
)
}