43 lines
986 B
TypeScript
43 lines
986 B
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface SectionProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
title?: string;
|
|
description?: string;
|
|
variant?: 'default' | 'card' | 'highlight';
|
|
}
|
|
|
|
export function Section({
|
|
children,
|
|
className = '',
|
|
title,
|
|
description,
|
|
variant = 'default'
|
|
}: SectionProps) {
|
|
const baseClasses = 'space-y-4';
|
|
|
|
const variantClasses = {
|
|
default: '',
|
|
card: 'bg-iron-gray rounded-lg p-6 border border-charcoal-outline',
|
|
highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 rounded-lg p-6 border border-blue-500/30'
|
|
};
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<section className={classes}>
|
|
{title && (
|
|
<h2 className="text-xl font-semibold text-white">{title}</h2>
|
|
)}
|
|
{description && (
|
|
<p className="text-sm text-gray-400">{description}</p>
|
|
)}
|
|
{children}
|
|
</section>
|
|
);
|
|
} |