41 lines
1001 B
TypeScript
41 lines
1001 B
TypeScript
import { ReactNode } from 'react';
|
|
import { getResponsiveClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
|
|
|
|
interface ContainerProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
padding?: boolean;
|
|
}
|
|
|
|
export function Container({
|
|
children,
|
|
className = '',
|
|
config = {},
|
|
maxWidth = 'full',
|
|
padding = true
|
|
}: ContainerProps) {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
const classes = getResponsiveClasses(layoutConfig);
|
|
|
|
const maxWidthClasses = {
|
|
sm: 'max-w-sm',
|
|
md: 'max-w-md',
|
|
lg: 'max-w-lg',
|
|
xl: 'max-w-xl',
|
|
'2xl': 'max-w-2xl',
|
|
full: 'max-w-full',
|
|
};
|
|
|
|
const paddingClass = padding ? 'px-4 sm:px-6 lg:px-8' : '';
|
|
|
|
return (
|
|
<div
|
|
className={`${classes.container} ${maxWidthClasses[maxWidth]} ${paddingClass} ${className}`}
|
|
dir={layoutConfig.direction}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
} |