import { define, Styles } from '../../src'
export const Body = define('Body', {
base: 'body',
margin: 0,
padding: '40px 20px',
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
background: '#f3f4f6',
})
const Container = define('Container', {
maxWidth: 1200,
margin: '0 auto'
})
export const Header = define('Header', {
base: 'h1',
marginBottom: 40,
color: '#111827'
})
export const ExampleSection = define('ExampleSection', {
marginBottom: 40,
parts: {
Header: {
base: 'h2',
marginBottom: 16,
color: '#374151',
fontSize: 18
}
},
render({ props, parts: { Root, Header } }) {
return (
{props.children}
)
}
})
const Nav = define('SSR_Nav', {
base: 'nav',
display: 'flex',
gap: 20,
marginBottom: 40,
padding: 20,
background: 'white',
borderRadius: 8,
boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
})
const NavLink = define('SSR_NavLink', {
base: 'a',
color: '#3b82f6',
textDecoration: 'none',
states: {
hover: {
textDecoration: 'underline'
}
}
})
export const Layout = define({
render({ props }) {
return (
{props.title}
{props.children}
)
}
})