cloud-hosting-platform/site-builder
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

site-builder: FeaturesGrid renders image when 'image' set + expose image/button keys so the guided array editor edits them

Browse Source
This commit is contained in:
Josh Knapp
2026-07-07 14:16:14 -07:00
parent 1cfb51f181
commit 5a26e4ef43
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
craft/src/components/sections/FeaturesGrid.tsx
+9 -6
View File
@@ -39,10 +39,13 @@ interface FeaturesGridProps {
anchorId?: string; anchorId?: string;
} }
// Keys image/imageAlt/buttonText/buttonUrl are present (blank) on the defaults so
// the guided panel's generic array editor (which derives fields from the first
// item's keys) exposes inputs for them. An image renders whenever `image` is set.
const defaultFeatures: FeatureItem[] = [ const defaultFeatures: FeatureItem[] = [
{ title: 'Fast & Reliable', description: 'Built for performance with optimized loading and rock-solid uptime.', icon: '⚡' }, { title: 'Fast & Reliable', description: 'Built for performance with optimized loading and rock-solid uptime.', icon: '⚡', image: '', imageAlt: '', buttonText: '', buttonUrl: '' },
{ title: 'Easy to Use', description: 'Intuitive drag-and-drop interface that anyone can master in minutes.', icon: '✨' }, { title: 'Easy to Use', description: 'Intuitive drag-and-drop interface that anyone can master in minutes.', icon: '✨', image: '', imageAlt: '', buttonText: '', buttonUrl: '' },
{ title: 'Fully Responsive', description: 'Looks great on every device, from phones to ultrawide monitors.', icon: '📱' }, { title: 'Fully Responsive', description: 'Looks great on every device, from phones to ultrawide monitors.', icon: '📱', image: '', imageAlt: '', buttonText: '', buttonUrl: '' },
]; ];
export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({ export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
@@ -80,7 +83,7 @@ export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
border: '1px solid #e2e8f0', border: '1px solid #e2e8f0',
}} }}
> >
{feat.mediaType === 'image' && feat.image ? ( {feat.image ? (
<img <img
src={feat.image} src={feat.image}
alt={feat.imageAlt || feat.title || ''} alt={feat.imageAlt || feat.title || ''}
@@ -136,7 +139,7 @@ const FeaturesGridSettings: React.FC = () => {
const addFeature = () => { const addFeature = () => {
setProp((p: FeaturesGridProps) => { setProp((p: FeaturesGridProps) => {
p.features = [...(p.features || defaultFeatures), { title: 'New Feature', description: 'Describe this feature.', icon: '🔧' }]; p.features = [...(p.features || defaultFeatures), { title: 'New Feature', description: 'Describe this feature.', icon: '🔧', image: '', imageAlt: '', buttonText: '', buttonUrl: '' }];
}); });
}; };
@@ -282,7 +285,7 @@ FeaturesGrid.craft = {
}); });
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : ''; const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
const cards = (props.features || defaultFeatures).map((feat) => { const cards = (props.features || defaultFeatures).map((feat) => {
const media = feat.mediaType === 'image' && feat.image const media = feat.image
? `<img src="${esc(feat.image)}" alt="${esc(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">` ? `<img src="${esc(feat.image)}" alt="${esc(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
: `<div style="font-size:36px;margin-bottom:16px">${esc(feat.icon)}</div>`; : `<div style="font-size:36px;margin-bottom:16px">${esc(feat.icon)}</div>`;
const button = feat.buttonText const button = feat.buttonText