75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
|
|
interface SectionProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
title?: string;
|
|
description?: string;
|
|
variant?: 'default' | 'card' | 'highlight' | 'dark' | 'light';
|
|
id?: string;
|
|
py?: number;
|
|
minHeight?: string;
|
|
borderBottom?: boolean;
|
|
borderColor?: string;
|
|
overflow?: 'hidden' | 'visible' | 'auto' | 'scroll';
|
|
position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
|
|
}
|
|
|
|
export function Section({
|
|
children,
|
|
className = '',
|
|
title,
|
|
description,
|
|
variant = 'default',
|
|
id,
|
|
py = 16,
|
|
minHeight,
|
|
borderBottom,
|
|
borderColor,
|
|
overflow,
|
|
position
|
|
}: SectionProps) {
|
|
const variantClasses = {
|
|
default: '',
|
|
card: 'bg-panel-gray rounded-none p-6 border border-border-gray',
|
|
highlight: 'bg-gradient-to-r from-primary-accent/10 to-transparent rounded-none p-6 border border-primary-accent/30',
|
|
dark: 'bg-graphite-black',
|
|
light: 'bg-panel-gray'
|
|
};
|
|
|
|
const classes = [
|
|
variantClasses[variant],
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box
|
|
as="section"
|
|
id={id}
|
|
className={classes}
|
|
py={py as 0}
|
|
px={4}
|
|
minHeight={minHeight}
|
|
borderBottom={borderBottom}
|
|
borderColor={borderColor}
|
|
overflow={overflow}
|
|
position={position}
|
|
>
|
|
<Box className="mx-auto max-w-7xl">
|
|
{(title || description) && (
|
|
<Box mb={8}>
|
|
{title && <Heading level={2}>{title}</Heading>}
|
|
{description && <Text color="text-gray-400" block mt={2}>{description}</Text>}
|
|
</Box>
|
|
)}
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|