45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { container } from '@/lib/utils';
|
|
import React from 'react';
|
|
|
|
export interface SectionProps {
|
|
children: React.ReactNode;
|
|
background?: 'white' | 'light' | 'dark' | 'pattern' | 'gradient';
|
|
spacing?: 'xs' | 'small' | 'medium' | 'large' | 'none';
|
|
fullWidth?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function Section({
|
|
children,
|
|
background = 'white',
|
|
spacing = 'medium',
|
|
fullWidth = false,
|
|
className = '',
|
|
}: SectionProps) {
|
|
// Background styles
|
|
const backgroundClasses = {
|
|
white: 'bg-white',
|
|
light: 'bg-gray-50',
|
|
dark: 'bg-gray-900 text-white',
|
|
pattern: 'bg-white bg-[url("/assets/patterns/dots.svg")] bg-repeat',
|
|
gradient: 'bg-gradient-to-b from-white to-gray-100',
|
|
};
|
|
|
|
const spacingClasses = {
|
|
none: 'py-0',
|
|
xs: 'py-[64px] md:py-[80px]',
|
|
small: 'py-6 md:py-8',
|
|
medium: 'py-[80px] md:py-[112px]',
|
|
large: 'py-[80px] md:py-[112px]',
|
|
};
|
|
|
|
return (
|
|
<section
|
|
className={`w-full ${backgroundClasses[background]} ${spacingClasses[spacing]} ${className}`}
|
|
>
|
|
<div className={fullWidth ? 'w-full' : container}>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|