31 lines
758 B
TypeScript
31 lines
758 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Box, type Spacing } from './Box';
|
|
|
|
export interface ContentViewportProps {
|
|
children: ReactNode;
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const ContentViewport = ({
|
|
children,
|
|
padding = 'md',
|
|
fullWidth = false,
|
|
}: ContentViewportProps) => {
|
|
const paddingMap: Record<NonNullable<ContentViewportProps['padding']>, Spacing> = {
|
|
none: 0,
|
|
sm: 4,
|
|
md: 8,
|
|
lg: 12,
|
|
};
|
|
|
|
const maxWidth = fullWidth ? '100%' : '80rem';
|
|
|
|
return (
|
|
<Box flexGrow={1} width="full" display="flex" justifyContent="center" minWidth="0">
|
|
<Box width="full" maxWidth={maxWidth} paddingX={4} py={paddingMap[padding]} minWidth="0">
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}; |