54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box, BoxProps } from './primitives/Box';
|
|
|
|
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
|
|
|
|
interface ContainerProps extends Omit<BoxProps<'div'>, 'size' | 'padding'> {
|
|
children: ReactNode;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
padding?: boolean;
|
|
className?: string;
|
|
py?: Spacing;
|
|
pb?: Spacing;
|
|
}
|
|
|
|
export function Container({
|
|
children,
|
|
size = 'lg',
|
|
padding = true,
|
|
className = '',
|
|
py,
|
|
pb,
|
|
...props
|
|
}: ContainerProps) {
|
|
const sizeClasses = {
|
|
sm: 'max-w-2xl',
|
|
md: 'max-w-4xl',
|
|
lg: 'max-w-7xl',
|
|
xl: 'max-w-[1400px]',
|
|
full: 'max-w-full'
|
|
};
|
|
|
|
const spacingMap: Record<number, string> = {
|
|
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
|
|
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
|
|
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
|
|
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
|
|
};
|
|
|
|
const classes = [
|
|
'mx-auto',
|
|
sizeClasses[size],
|
|
padding ? 'px-4 sm:px-6 lg:px-8' : '',
|
|
py !== undefined ? `py-${spacingMap[py]}` : '',
|
|
pb !== undefined ? `pb-${spacingMap[pb]}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|