shadowdao
65a10a1ef9
Each component defined a .craft.related.settings panel that was never rendered -- the right panel renders only GuidedStyles (per-type *StylePanel components), never .related.settings. Removed all dead settings components across every component, their settings-only helpers (including the dead uploadToWhp/showBrowser/handleBrowse asset-browse blocks in Logo/Navbar/VideoBlock/FeaturesGrid, and CtasEditor in _cta-helpers), and dropped the now-empty related keys. Render output, .craft props/rules, and toHtml statics are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
124 lines
3.3 KiB
TypeScript
124 lines
3.3 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, Element, UserComponent } from '@craftjs/core';
|
|
import { Container } from './Container';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { escapeAttr } from '../../utils/escape';
|
|
|
|
interface BackgroundSectionProps {
|
|
bgImage?: string;
|
|
bgColor?: string;
|
|
overlayColor?: string;
|
|
overlayOpacity?: number;
|
|
innerMaxWidth?: string;
|
|
style?: CSSProperties;
|
|
children?: React.ReactNode;
|
|
anchorId?: string;
|
|
}
|
|
|
|
export const BackgroundSection: UserComponent<BackgroundSectionProps> = ({
|
|
bgImage = '',
|
|
bgColor = '#1e293b',
|
|
overlayColor = '#000000',
|
|
overlayOpacity = 0.4,
|
|
innerMaxWidth = '1200px',
|
|
style = {},
|
|
anchorId,
|
|
}) => {
|
|
const { connectors: { connect, drag } } = useNode();
|
|
|
|
return (
|
|
<section
|
|
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
id={anchorId || undefined}
|
|
style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
minHeight: '200px',
|
|
backgroundColor: bgColor,
|
|
backgroundImage: bgImage ? `url(${bgImage})` : undefined,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
...style,
|
|
}}
|
|
>
|
|
{/* Overlay */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
backgroundColor: overlayColor,
|
|
opacity: overlayOpacity,
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
{/* Content */}
|
|
<Element
|
|
id="bg-section-inner"
|
|
is={Container}
|
|
canvas
|
|
style={{
|
|
position: 'relative',
|
|
zIndex: 1,
|
|
maxWidth: innerMaxWidth,
|
|
margin: '0 auto',
|
|
padding: '60px 20px',
|
|
}}
|
|
tag="div"
|
|
/>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
BackgroundSection.craft = {
|
|
displayName: 'Background Section',
|
|
props: {
|
|
bgImage: '',
|
|
bgColor: '#1e293b',
|
|
overlayColor: '#000000',
|
|
overlayOpacity: 0.4,
|
|
innerMaxWidth: '1200px',
|
|
style: { padding: '0' },
|
|
anchorId: '',
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(BackgroundSection as any).toHtml = (props: BackgroundSectionProps, childrenHtml: string) => {
|
|
const outerStyle = cssPropsToString({
|
|
position: 'relative',
|
|
width: '100%',
|
|
minHeight: '200px',
|
|
backgroundColor: props.bgColor || '#1e293b',
|
|
backgroundImage: props.bgImage ? `url(${props.bgImage})` : undefined,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
...props.style,
|
|
});
|
|
const overlayStyle = cssPropsToString({
|
|
position: 'absolute',
|
|
inset: '0',
|
|
backgroundColor: props.overlayColor || '#000000',
|
|
opacity: String(props.overlayOpacity ?? 0.4),
|
|
pointerEvents: 'none',
|
|
});
|
|
const innerStyle = cssPropsToString({
|
|
position: 'relative',
|
|
zIndex: '1',
|
|
maxWidth: props.innerMaxWidth || '1200px',
|
|
margin: '0 auto',
|
|
padding: '60px 20px',
|
|
});
|
|
const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
|
|
return {
|
|
html: `<section${idAttr}${outerStyle ? ` style="${outerStyle}"` : ''}><div${overlayStyle ? ` style="${overlayStyle}"` : ''}></div><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></section>`,
|
|
};
|
|
};
|