This repository has been archived by the owner on Dec 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 104
/
Section.js
87 lines (75 loc) 路 1.8 KB
/
Section.js
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
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import theme from 'lib/theme'
import slugify from '@sindresorhus/slugify'
import { observer } from 'mobx-react'
import styles from './styles.module.css'
@observer
export class Section extends Component {
static propTypes = {
inverted: PropTypes.bool,
stretch: PropTypes.bool,
title: PropTypes.node,
subtitle: PropTypes.node,
desc: PropTypes.node,
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node
}
static defaultProps = {
inverted: false,
stretch: false
}
render() {
const {
inverted,
stretch,
title,
subtitle,
desc,
id,
className,
style = {},
children
} = this.props
const sectionProps = {}
if (id || title) {
sectionProps.id = id || slugify(title.toLowerCase())
}
const themeArgs = [
styles,
'section',
theme(styles, `${sectionProps.id}-section`),
inverted && theme(styles, 'inverted'),
className
]
return (
<section
className={theme(...themeArgs)}
style={{
background: inverted
? theme['@section-fg-color']
: theme['@section-bg-color'],
...style
}}
{...sectionProps}
>
<div
className={theme(
styles,
'content',
stretch && theme(styles, 'stretch')
)}
>
{title && <h1 className={theme(styles, 'title')}>{title}</h1>}
{subtitle && (
<h5 className={theme(styles, 'subtitle')}>{subtitle}</h5>
)}
{desc && <p className={theme(styles, 'desc')}>{desc}</p>}
{children}
</div>
</section>
)
}
}