65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
export interface ContainerProps {
|
|
children: ReactNode;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
|
|
zIndex?: number;
|
|
/** @deprecated Use semantic props instead. */
|
|
py?: number;
|
|
}
|
|
|
|
/**
|
|
* Container - Redesigned for "Modern Precision" theme.
|
|
* Enforces semantic props.
|
|
*/
|
|
export const Container = ({
|
|
children,
|
|
size = 'lg',
|
|
padding = 'md',
|
|
spacing = 'none',
|
|
position,
|
|
zIndex,
|
|
py,
|
|
}: 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 spacingMap = {
|
|
none: 'py-0',
|
|
sm: 'py-4',
|
|
md: 'py-8',
|
|
lg: 'py-12',
|
|
xl: 'py-16',
|
|
};
|
|
|
|
const combinedStyle: React.CSSProperties = {
|
|
...(position ? { position } : {}),
|
|
...(zIndex !== undefined ? { zIndex } : {}),
|
|
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`mx-auto w-full ${sizeMap[size]} ${paddingMap[padding]} ${spacingMap[spacing]}`}
|
|
style={combinedStyle}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|