18a9c7e371
* Update `packages/` * Update examples * Update tests * Update bench * Update top level files * Fix build * trigger
41 lines
883 B
JavaScript
Executable file
41 lines
883 B
JavaScript
Executable file
import { useFela, FelaComponent } from 'react-fela'
|
|
|
|
const Container = ({ children }) => (
|
|
<FelaComponent
|
|
style={{
|
|
maxWidth: 700,
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
lineHeight: 1.5,
|
|
}}
|
|
as="div"
|
|
>
|
|
{children}
|
|
</FelaComponent>
|
|
)
|
|
|
|
const textRule = ({ size, theme }) => ({
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
fontSize: size,
|
|
color: '#333',
|
|
})
|
|
|
|
function Text({ size = 16, children }) {
|
|
const { css } = useFela({ size })
|
|
|
|
return <p className={css(textRule)}>{children}</p>
|
|
}
|
|
|
|
function Title({ children, size = 24 }) {
|
|
const { css } = useFela()
|
|
|
|
return <h1 className={css({ fontSize: size, color: '#555' })}>{children}</h1>
|
|
}
|
|
|
|
export default () => (
|
|
<Container>
|
|
<Title size={50}>My Title</Title>
|
|
<Text>Hi, I am Fela.</Text>
|
|
</Container>
|
|
)
|