31 lines
691 B
TypeScript
31 lines
691 B
TypeScript
import type { ElementType, ReactNode } from "react";
|
|
|
|
interface SectionProps extends React.HTMLAttributes<HTMLElement> {
|
|
children: ReactNode;
|
|
className?: string;
|
|
as?: ElementType;
|
|
variant?: "sm" | "lg" | "hero" | "flush";
|
|
}
|
|
|
|
export function Section({
|
|
children,
|
|
className = "",
|
|
as: Tag = "section",
|
|
variant,
|
|
...props
|
|
}: SectionProps) {
|
|
const variantClass = variant === "sm" ? "section--sm" :
|
|
variant === "lg" ? "section--lg" :
|
|
variant === "hero" ? "section--hero" :
|
|
variant === "flush" ? "section--flush" : "";
|
|
|
|
return (
|
|
<Tag
|
|
className={`section ${variantClass} ${className}`.trim()}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|