55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { type ReactNode } from "react";
|
|
|
|
type PaddingSize = "none" | "sm" | "md" | "lg" | "xl";
|
|
|
|
interface SectionContainerProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
/** Vertical padding preset — maps to spacing tokens */
|
|
paddingY?: PaddingSize;
|
|
/** HTML element to render */
|
|
as?: "section" | "div";
|
|
/** Section id for anchor links */
|
|
id?: string;
|
|
}
|
|
|
|
/**
|
|
* Tailwind class map for vertical section padding.
|
|
*
|
|
* Values use the spacing tokens from design-tokens.ts:
|
|
* sm = 60px
|
|
* md = 60px → 80px
|
|
* lg = 60px → 80px → 100px
|
|
* xl = 60px → 80px → 100px → 120px
|
|
*/
|
|
const paddingYClasses: Record<PaddingSize, string> = {
|
|
none: "",
|
|
sm: "py-[60px]",
|
|
md: "py-[60px] md:py-[80px]",
|
|
lg: "py-[60px] md:py-[80px] lg:py-[100px]",
|
|
xl: "py-[60px] md:py-[80px] lg:py-[100px] xl:py-[120px]",
|
|
};
|
|
|
|
/**
|
|
* SectionContainer — consistent vertical spacing for page sections.
|
|
*
|
|
* Use this to wrap every major page section. The `paddingY` prop
|
|
* selects from predefined responsive spacing tokens.
|
|
*
|
|
* Does NOT include horizontal constraints — nest a `PageContainer`
|
|
* inside for boxed content.
|
|
*/
|
|
export function SectionContainer({
|
|
children,
|
|
className = "",
|
|
paddingY = "lg",
|
|
as: Tag = "section",
|
|
id,
|
|
}: SectionContainerProps) {
|
|
return (
|
|
<Tag id={id} className={`${paddingYClasses[paddingY]} ${className}`}>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|