60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
export interface ContainerProps {
|
|
children: ReactNode;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | any;
|
|
padding?: 'none' | 'sm' | 'md' | 'lg' | any;
|
|
py?: number | any;
|
|
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | any;
|
|
zIndex?: number | any;
|
|
paddingX?: number | any;
|
|
fullWidth?: boolean | any;
|
|
}
|
|
|
|
/**
|
|
* Container - Redesigned for "Modern Precision" theme.
|
|
* Includes compatibility props to prevent app-wide breakage.
|
|
*/
|
|
export const Container = ({
|
|
children,
|
|
size = 'lg',
|
|
padding = 'md',
|
|
py,
|
|
position,
|
|
zIndex,
|
|
paddingX,
|
|
fullWidth,
|
|
}: ContainerProps) => {
|
|
const sizeMap = {
|
|
sm: 'max-w-[40rem]',
|
|
md: 'max-w-[48rem]',
|
|
lg: 'max-w-[64rem]',
|
|
xl: 'max-w-[80rem]',
|
|
full: 'max-w-full',
|
|
};
|
|
|
|
const paddingMap = {
|
|
none: 'px-0',
|
|
sm: 'px-2',
|
|
md: 'px-4',
|
|
lg: 'px-8',
|
|
};
|
|
|
|
const combinedStyle: React.CSSProperties = {
|
|
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
|
|
...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
|
|
...(position ? { position } : {}),
|
|
...(zIndex !== undefined ? { zIndex } : {}),
|
|
...(fullWidth ? { width: '100%' } : {}),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`mx-auto w-full ${sizeMap[size as keyof typeof sizeMap] || sizeMap.lg} ${paddingMap[padding as keyof typeof paddingMap] || paddingMap.md}`}
|
|
style={combinedStyle}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|