38 lines
922 B
TypeScript
38 lines
922 B
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
|
|
export type ContentSectionProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
as?: "section" | "article";
|
|
children: ReactNode;
|
|
density?: "none" | "compact" | "default";
|
|
layout?: "flow" | "stack";
|
|
spacing?: "none" | "block";
|
|
surface?: "panel" | "subtle";
|
|
};
|
|
|
|
export default function ContentSection({
|
|
as: Component = "section",
|
|
children,
|
|
density = "none",
|
|
layout = "flow",
|
|
spacing = "block",
|
|
surface = "panel",
|
|
className = "",
|
|
...props
|
|
}: ContentSectionProps) {
|
|
return (
|
|
<Component
|
|
{...props}
|
|
className={[
|
|
"content-section",
|
|
`content-section-density-${density}`,
|
|
`content-section-layout-${layout}`,
|
|
`content-section-spacing-${spacing}`,
|
|
`content-section-surface-${surface}`,
|
|
className
|
|
].filter(Boolean).join(" ")}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|