37 lines
1020 B
TypeScript
37 lines
1020 B
TypeScript
import { CSSProperties, PropsWithChildren } from 'react'
|
|
import defaultStyle from './style.module.scss'
|
|
|
|
interface ContainerProps {
|
|
style?: CSSProperties
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Container component with pre-defined width, padding and margins for top level layout.
|
|
*
|
|
* **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
|
|
* - When using *className* override, that styles are imported after the actual `Container` component
|
|
* ```
|
|
* import { Container } from './components/Container'
|
|
* import styles from './style.module.scss'
|
|
* ```
|
|
* - or add *!important* to imported styles
|
|
* - or override styles with *CSSProperties* object
|
|
*/
|
|
export const Container = ({
|
|
style = {},
|
|
className = '',
|
|
children
|
|
}: PropsWithChildren<ContainerProps>) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
...style
|
|
}}
|
|
className={`${defaultStyle.container} ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|