91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import { SharedContentLayout } from '@/components/SharedContentLayout';
|
|
import { getSectionBackground } from '@/lib/sectionStyles';
|
|
import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
|
|
|
|
interface ImageTextSectionProps {
|
|
id: string;
|
|
layout?: string;
|
|
colorScheme?: string;
|
|
title?: string;
|
|
text?: string;
|
|
image?: string;
|
|
elementStyles?: Record<string, any>;
|
|
}
|
|
|
|
export function ImageTextSection({
|
|
id,
|
|
layout = 'image-left',
|
|
colorScheme = 'default',
|
|
title,
|
|
text,
|
|
image,
|
|
cta_text,
|
|
cta_url,
|
|
elementStyles,
|
|
styles,
|
|
isEditor,
|
|
}: ImageTextSectionProps & { styles?: Record<string, any>, cta_text?: string, cta_url?: string, isEditor?: boolean }) {
|
|
const isImageRight = layout === 'image-right' || layout === 'right';
|
|
|
|
// Helper to get text styles (including font family)
|
|
const getTextStyles = (elementName: string) => {
|
|
const styles = elementStyles?.[elementName] || {};
|
|
return {
|
|
classNames: cn(
|
|
styles.fontSize,
|
|
styles.fontWeight,
|
|
{
|
|
'font-sans': styles.fontFamily === 'secondary',
|
|
'font-serif': styles.fontFamily === 'primary',
|
|
}
|
|
),
|
|
style: {
|
|
color: styles.color,
|
|
textAlign: styles.textAlign,
|
|
backgroundColor: styles.backgroundColor,
|
|
borderColor: styles.borderColor,
|
|
borderWidth: styles.borderWidth,
|
|
borderRadius: styles.borderRadius,
|
|
}
|
|
};
|
|
};
|
|
|
|
const titleStyle = getTextStyles('title');
|
|
const textStyle = getTextStyles('text');
|
|
const buttonStyle = getTextStyles('button');
|
|
|
|
const imageStyle = elementStyles?.['image'] || {};
|
|
|
|
const sectionBg = getSectionBackground(styles);
|
|
|
|
return (
|
|
<div
|
|
id={id}
|
|
className={cn(
|
|
'wn-section wn-image-text relative w-full',
|
|
`wn-scheme--${colorScheme}`
|
|
)}
|
|
>
|
|
<SharedContentLayout
|
|
title={title}
|
|
text={text}
|
|
image={image}
|
|
imagePosition={isImageRight ? 'right' : 'left'}
|
|
containerWidth={styles?.contentWidth === 'full' ? 'full' : styles?.contentWidth === 'boxed' ? 'boxed' : 'contained'}
|
|
titleStyle={titleStyle.style}
|
|
titleClassName={titleStyle.classNames}
|
|
textStyle={textStyle.style}
|
|
textClassName={textStyle.classNames}
|
|
imageStyle={imageStyle}
|
|
cardStyle={{ backgroundColor: styles?.cardBackgroundColor }}
|
|
buttons={cta_text && cta_url ? [{ text: cta_text, url: cta_url }] : []}
|
|
buttonStyle={{
|
|
classNames: buttonStyle.classNames,
|
|
style: buttonStyle.style
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|