kami
32 lines
877 B
TypeScript
32 lines
877 B
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
type ContainerWidth = 'sm' | 'md' | 'lg' | 'full';
|
|
|
|
interface PageContainerProps {
|
|
children: ReactNode;
|
|
/** Controls max-width. sm → max-w-2xl, md → max-w-3xl (default), lg → max-w-5xl, full → no constraint. */
|
|
width?: ContainerWidth;
|
|
className?: string;
|
|
}
|
|
|
|
const WIDTH_CLASSES: Record<ContainerWidth, string> = {
|
|
sm: 'max-w-2xl',
|
|
md: 'max-w-3xl',
|
|
lg: 'max-w-5xl',
|
|
full: '',
|
|
};
|
|
|
|
/**
|
|
* Ethos page container — enforces consistent horizontal centering and
|
|
* vertical spacing so every page opens the same way.
|
|
*
|
|
* Previously every page hand-rolled its own `mx-auto space-y-* max-w-*`.
|
|
*/
|
|
export function PageContainer({ children, width = 'md', className = '' }: PageContainerProps) {
|
|
return (
|
|
<div className={`mx-auto space-y-6 ${WIDTH_CLASSES[width]} ${className}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|