forked from blocks/blocks
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbasic.js
More file actions
94 lines (86 loc) · 1.78 KB
/
Copy pathbasic.js
File metadata and controls
94 lines (86 loc) · 1.78 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Link } from '@theme-ui/components'
import { ControlType, applyPropertyControls } from 'property-controls'
const HeaderBasic = ({ justifyContent = 'space-between', ...props }) => {
return (
<header
sx={{
variant: 'styles.header',
display: 'flex',
alignItems: 'center',
justifyContent
}}
{...props}
/>
)
}
HeaderBasic.Logo = props => {
return (
<Link
sx={{
variant: 'styles.navLink',
p: 2
}}
{...props}
/>
)
}
HeaderBasic.Nav = props => {
return <nav {...props} />
}
HeaderBasic.Link = props => {
return (
<Link
sx={{
variant: 'styles.navLink',
p: 2
}}
{...props}
/>
)
}
applyPropertyControls(HeaderBasic, {
justifyContent: {
type: ControlType.Enum,
defaultValue: 'right',
options: ['space-between', 'start', 'space-evenly']
},
sx: {
type: ControlType.Style
}
})
applyPropertyControls(HeaderBasic.Nav, {
sx: {
type: ControlType.Style
}
})
const linkControls = {
children: {
title: 'Text',
type: ControlType.String,
required: true
},
to: {
title: 'URL',
type: ControlType.String,
defaultValue: '#!',
required: true
},
sx: {
type: ControlType.Style
}
}
applyPropertyControls(HeaderBasic.Logo, linkControls)
applyPropertyControls(HeaderBasic.Link, linkControls)
HeaderBasic.usage = `
<HeaderBasic>
<HeaderBasic.Logo to="/">Hello</HeaderBasic.Logo>
<HeaderBasic.Nav>
<HeaderBasic.Link to="/about">About</HeaderBasic.Link>
<HeaderBasic.Link to="/blog">Blog</HeaderBasic.Link>
<HeaderBasic.Link to="/contact">Contact</HeaderBasic.Link>
</HeaderBasic.Nav>
</HeaderBasic>
`
export default HeaderBasic