mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
c39e555353
* Improve Fela example - add webPreset - cleaner code - add key for style - demonstrate Fela composition * Fix standard lint
33 lines
662 B
JavaScript
33 lines
662 B
JavaScript
import { createComponent } from 'react-fela'
|
|
import Page from '../layout'
|
|
|
|
const Container = createComponent(() => ({
|
|
maxWidth: 700,
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
lineHeight: 1.5
|
|
}))
|
|
|
|
const Text = createComponent(({ size = 16 }) => ({
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
fontSize: size,
|
|
color: '#333'
|
|
}))
|
|
|
|
const Title = createComponent(
|
|
({ size = 24 }) => ({
|
|
fontSize: size,
|
|
color: '#555'
|
|
}),
|
|
Text,
|
|
)
|
|
|
|
export default () =>
|
|
<Page>
|
|
<Container>
|
|
<Title size={50}>My Title</Title>
|
|
<Text>Hi, I am Fela.</Text>
|
|
</Container>
|
|
</Page>
|