Thanks for that, managed to get the no-code options into place. However we want to separate paragraphs, with our current code below when editing paragraph1, we also edit paragraph2. I would like these separately but can’t seem to get that to work. I tried adding a tag and was trying to reference it, but it just supplies 2 paragraphs on each location now instead of one in each.
Is there a way to have these 2 paragraphs be independent of each other?
import React from "react";
import { Builder, BuilderBlocks } from "@builder.io/react";
import { AssetKind } from "src/graphql/types";
import { AssetImage as CclAssetImage, Text as CclText } from "src/ccl/document";
import { Flex, Grid } from "src/ccl/layout";
import scratchOverlay from "src/assets/backgrounds/scratch-overlay.jpg";
type TextAndImageVariant = "light" | "dark" | "darkWithScratches";
interface TextAndImageProps {
variant?: TextAndImageVariant;
image1: string;
imageAlt1: string;
image2: string;
imageAlt2: string;
subtitle1: string;
subtitle2: string;
builderBlock: any;
}
export const TextAndImage: React.FC<TextAndImageProps> = ({
variant = "light",
image1,
imageAlt1,
image2,
imageAlt2,
subtitle1,
subtitle2,
builderBlock,
}) => {
const variants = {
light: {
color: "black",
background: "white",
},
dark: {
color: "white",
background: "black",
},
darkWithScratches: {
color: "white",
background: `url(${scratchOverlay})`,
},
};
return (
<Grid
css={{
background: variants[variant].background,
gridColumns: 1,
gridTemplateAreas:
'"firstImage" "firstParagraph" "secondImage" "secondParagraph"',
px: "$5",
"@bp3": {
gridColumns: 2,
gridTemplateAreas:
'"firstImage firstParagraph" "secondParagraph secondImage"',
gridGap: "84px",
px: "$17",
},
"@bp5": {
gridGap: "115px",
},
}}
>
<CclAssetImage
alt={imageAlt1}
asset={{
mediaUrl: image1,
kind: AssetKind.Image,
sortWeight: 1,
id: "1",
}}
imgCss={{ gridArea: "firstImage" }}
size={{
"@initial": {
width: 291,
height: 178,
},
"@bp3": {
width: 474,
height: 330,
},
"@bp5": {
width: 676,
height: 472,
},
}}
/>
<Flex
css={{
gridArea: "firstParagraph",
flexDirection: "column",
justifyContent: "center",
pb: "$16",
"@bp3": { pb: "$0" },
}}
>
<CclText
variant={{ "@initial": "h3", "@bp3": "h2" }}
css={{
color: variants[variant].color,
py: "22px",
"@bp3": { pb: "44px" },
}}
>
{subtitle1}
</CclText>
<BuilderBlocks
blocks={builderBlock.children}
parentElementId={builderBlock.id}
dataPath="children"
/>
</Flex>
<CclAssetImage
alt={imageAlt2}
imgCss={{ gridArea: "secondImage" }}
asset={{
mediaUrl: image2,
kind: AssetKind.Image,
sortWeight: 1,
id: "1",
}}
size={{
"@initial": {
width: 291,
height: 178,
},
"@bp3": {
width: 474,
height: 330,
},
"@bp5": {
width: 676,
height: 472,
},
}}
/>
<Flex
css={{
gridArea: "secondParagraph",
flexDirection: "column",
justifyContent: "center",
}}
>
<CclText
variant={{ "@initial": "h3", "@bp3": "h2" }}
css={{
color: variants[variant].color,
py: "22px",
"@bp3": { pb: "44px" },
}}
>
{subtitle2}
</CclText>
<BuilderBlocks
blocks={builderBlock.children}
parentElementId={builderBlock.id}
dataPath="children"
/>
</Flex>
</Grid>
);
};
Builder.registerComponent(TextAndImage, {
name: "TextAndImage",
canHaveChildren: true,
inputs: [
{ name: "image1", type: "file", allowedFileTypes: ["jpeg", "png"] },
{
name: "imageAlt1",
type: "text",
defaultValue: "This is an image",
},
{ name: "image2", type: "file", allowedFileTypes: ["jpeg", "png"] },
{
name: "imageAlt2",
type: "text",
defaultValue: "This is an image",
},
{
name: "subtitle1",
type: "text",
defaultValue: "A short subtitle",
},
{
name: "subtitle2",
type: "text",
defaultValue: "A short subtitle",
},
{
name: "variant",
type: "text",
defaultValue: "light",
enum: ["light", "dark", "darkWithScratches"],
},
],
defaultChildren: [
{
"@type": "@builder.io/sdk:Element",
component: {
tag: "0",
name: "Text",
options: {
text: "Write text paragraph here",
},
},
},
{
"@type": "@builder.io/sdk:Element",
component: {
tag: "1",
name: "Text",
options: {
text: "Write text paragraph 2 here",
},
},
},
],
});
