feat(layout): add full-height flex layout and FullWidth component
This commit is contained in:
@@ -20,6 +20,9 @@ export default defineConfig({
|
|||||||
|
|
||||||
globalCss: {
|
globalCss: {
|
||||||
body: {
|
body: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
minHeight: '100vh',
|
||||||
backgroundColor: 'neutral.1',
|
backgroundColor: 'neutral.1',
|
||||||
color: 'neutral.12',
|
color: 'neutral.12',
|
||||||
fontFamily: "'Roboto Variable', sans-serif",
|
fontFamily: "'Roboto Variable', sans-serif",
|
||||||
|
|||||||
13
src/components/layout/FullWidth.tsx
Normal file
13
src/components/layout/FullWidth.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { css, cx } from '@styled-system/css'
|
||||||
|
import type { FC, ReactNode } from 'react'
|
||||||
|
|
||||||
|
export interface FullWidthProps {
|
||||||
|
className?: string
|
||||||
|
children?: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const FullWidth: FC<FullWidthProps> = ({ className, children }) => {
|
||||||
|
return <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FullWidth
|
||||||
Reference in New Issue
Block a user