79 lines
1.4 KiB
TypeScript
79 lines
1.4 KiB
TypeScript
import { define, Styles } from '../src'
|
|
|
|
export const Body = define('Body', {
|
|
base: 'body',
|
|
layout: {
|
|
margin: 0,
|
|
padding: '40px 20px',
|
|
|
|
},
|
|
look: {
|
|
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
|
|
background: '#f3f4f6',
|
|
}
|
|
})
|
|
|
|
const Container = define('Container', {
|
|
layout: {
|
|
maxWidth: 1200,
|
|
margin: '0 auto'
|
|
}
|
|
})
|
|
|
|
export const Header = define('Header', {
|
|
base: 'h1',
|
|
layout: {
|
|
marginBottom: 40,
|
|
},
|
|
look: {
|
|
color: '#111827'
|
|
}
|
|
})
|
|
|
|
export const ExampleSection = define('ExampleSection', {
|
|
layout: {
|
|
marginBottom: 40
|
|
},
|
|
parts: {
|
|
Header: {
|
|
base: 'h2',
|
|
layout: {
|
|
marginBottom: 16
|
|
},
|
|
look: {
|
|
color: '#374151',
|
|
fontSize: 18
|
|
}
|
|
}
|
|
},
|
|
render({ props, parts: { Root, Header } }) {
|
|
return (
|
|
<Root>
|
|
<Header>{props.title}</Header>
|
|
{props.children}
|
|
</Root>
|
|
)
|
|
}
|
|
})
|
|
|
|
export const Layout = define({
|
|
render({ props }) {
|
|
return (
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{props.title}</title>
|
|
<Styles />
|
|
</head>
|
|
<Body>
|
|
<Container>
|
|
<Header>{props.title}</Header>
|
|
{props.children}
|
|
</Container>
|
|
</Body>
|
|
</html>
|
|
)
|
|
}
|
|
})
|