Files
react/components/page/page-content.tsx
unix 45e1b0a396 feat(page): add component
feat(page): add header and footer

feat(page): add dot-backdrop decoration
2020-05-07 15:49:34 +08:00

37 lines
776 B
TypeScript

import React from 'react'
import useTheme from '../styles/use-theme'
import withDefaults from '../utils/with-defaults'
interface Props {
className?: string
}
const defaultProps = {
className: '',
}
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type PageContentProps = Props & typeof defaultProps & NativeAttrs
const PageContent: React.FC<React.PropsWithChildren<PageContentProps>> = ({
className,
children,
...props
}) => {
const theme = useTheme()
return (
<main className={className} {...props}>
{children}
<style jsx>{`
main {
width: 100%;
padding: calc(${theme.layout.gap} * 2.5) 0;
}
`}</style>
</main>
)
}
export default withDefaults(PageContent, defaultProps)