105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
import { SharedContentLayout } from '@/components/SharedContentLayout';
|
|
|
|
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,
|
|
}: ImageTextSectionProps & { styles?: Record<string, any>, cta_text?: string, cta_url?: string }) {
|
|
const isImageLeft = layout === 'image-left' || layout === 'left';
|
|
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'] || {};
|
|
|
|
// Height preset support
|
|
const heightPreset = styles?.heightPreset || 'default';
|
|
const heightMap: Record<string, string> = {
|
|
'default': 'py-12 md:py-24',
|
|
'small': 'py-8 md:py-16',
|
|
'medium': 'py-16 md:py-32',
|
|
'large': 'py-24 md:py-48',
|
|
'screen': 'min-h-screen py-20 flex items-center',
|
|
};
|
|
const heightClasses = heightMap[heightPreset] || 'py-12 md:py-24';
|
|
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={cn(
|
|
'wn-section wn-image-text',
|
|
`wn-scheme--${colorScheme}`,
|
|
heightClasses,
|
|
{
|
|
'bg-muted': colorScheme === 'muted',
|
|
'bg-primary/5': colorScheme === 'primary',
|
|
}
|
|
)}
|
|
>
|
|
<SharedContentLayout
|
|
title={title}
|
|
text={text}
|
|
image={image}
|
|
imagePosition={isImageRight ? 'right' : 'left'}
|
|
containerWidth={styles?.contentWidth === 'full' ? 'full' : 'contained'}
|
|
titleStyle={titleStyle.style}
|
|
titleClassName={titleStyle.classNames}
|
|
textStyle={textStyle.style}
|
|
textClassName={textStyle.classNames}
|
|
imageStyle={{
|
|
backgroundColor: imageStyle.backgroundColor,
|
|
objectFit: imageStyle.objectFit,
|
|
}}
|
|
buttons={cta_text && cta_url ? [{ text: cta_text, url: cta_url }] : []}
|
|
buttonStyle={{
|
|
classNames: buttonStyle.classNames,
|
|
style: buttonStyle.style
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|