29 lines
817 B
TypeScript
29 lines
817 B
TypeScript
import type { ReactNode } from 'react';
|
|
import { cx } from './cx';
|
|
|
|
export interface SectionProps {
|
|
/** Paper is the default. Night is a dramatic device: the hero and at most one more. */
|
|
tone?: 'paper' | 'night';
|
|
/** `tight` for a subordinate band, `intro` for a page head. */
|
|
spacing?: 'default' | 'tight' | 'intro';
|
|
id?: string;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
/** One horizontal band of the page, carrying the vertical air around its content. */
|
|
export function Section({ tone = 'paper', spacing = 'default', id, children }: SectionProps) {
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={cx(
|
|
'section',
|
|
spacing === 'tight' && 'section--tight',
|
|
spacing === 'intro' && 'section--intro',
|
|
tone === 'night' && 'night',
|
|
)}
|
|
>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|