48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import Container from '@/components/site/container';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const tones = {
|
|
base: 'bg-surface',
|
|
muted: 'bg-surface-container-lowest',
|
|
raised: 'bg-surface-container-high/50',
|
|
} as const;
|
|
|
|
type SectionProps = {
|
|
id?: string;
|
|
/** Alternate tones between consecutive sections to separate them. */
|
|
tone?: keyof typeof tones;
|
|
size?: 'default' | 'narrow';
|
|
/** Decorative layers (e.g. <Glow />) rendered behind the content. */
|
|
background?: ReactNode;
|
|
className?: string;
|
|
containerClassName?: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function Section({
|
|
id,
|
|
tone = 'base',
|
|
size,
|
|
background,
|
|
className,
|
|
containerClassName,
|
|
children,
|
|
}: SectionProps) {
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={cn(
|
|
'border-outline-variant/30 relative w-full overflow-hidden border-b py-16 lg:py-24',
|
|
tones[tone],
|
|
className,
|
|
)}
|
|
>
|
|
{background}
|
|
<Container size={size} className={containerClassName}>
|
|
{children}
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|