43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
import { Pencil } from 'lucide-react';
|
|
import { lazy, ReactNode, Suspense } from 'react';
|
|
|
|
const SectionEditor = lazy(() => import('@/components/section-editor'));
|
|
|
|
interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
customize: boolean;
|
|
pageSection: PageSection | undefined;
|
|
contentClass?: string;
|
|
containerClass?: string;
|
|
containerStyle?: React.CSSProperties;
|
|
contentStyle?: React.CSSProperties;
|
|
}
|
|
|
|
const Section = ({ containerClass, contentClass, children, pageSection, customize, containerStyle, contentStyle, ...props }: SectionProps) => {
|
|
return (
|
|
<section className={cn('container', containerClass)} {...props} style={containerStyle}>
|
|
<div className={cn(contentClass, customize && 'section-edit')} style={contentStyle}>
|
|
{customize && pageSection && (
|
|
<Suspense fallback={null}>
|
|
<SectionEditor
|
|
section={pageSection}
|
|
actionComponent={
|
|
<Button size="icon" variant="secondary" className="absolute top-3 right-3 z-20">
|
|
<Pencil className="h-7 w-7" />
|
|
</Button>
|
|
}
|
|
/>
|
|
</Suspense>
|
|
)}
|
|
|
|
{/* Content */}
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Section;
|