34 lines
732 B
TypeScript
34 lines
732 B
TypeScript
import type { ElementType, ReactNode } from "react";
|
|
|
|
type SectionVariant = "default" | "hero" | "sm" | "lg" | "flush";
|
|
|
|
interface SectionProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
as?: ElementType;
|
|
variant?: SectionVariant;
|
|
id?: string;
|
|
}
|
|
|
|
export function Section({
|
|
children,
|
|
className = "",
|
|
as: Tag = "section",
|
|
variant = "default",
|
|
id,
|
|
}: SectionProps) {
|
|
const variantClasses: Record<SectionVariant, string> = {
|
|
default: "section",
|
|
hero: "section section--hero",
|
|
sm: "section section--sm",
|
|
lg: "section section--lg",
|
|
flush: "section section--flush",
|
|
};
|
|
|
|
return (
|
|
<Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|