config file :-
import type { Component } from "@builder.io/sdk";
const SeoSectionConfig: Component = {
name: "SeoSection",
inputs: [
{
name: "heading",
type: "string",
required: true,
defaultValue: "Start your weight loss journey",
friendlyName: "Heading",
helperText: "The main heading of AssessmentCTA",
},
{
name: "subheading",
type: "string",
required: true,
defaultValue: "Assessments typically take between 5-10 minutes.",
friendlyName: "Subheading",
helperText: "The subheading displayed below the main heading",
},
{
name: "links",
friendlyName: "Anchor Links for Navigation Sidebar",
type: "array",
required: true,
subFields: [
{
name: "anchorlinktext",
friendlyName: "Text Displayed on the Link",
type: "string",
required: true,
},
{
name: "sectionid",
friendlyName: "Target Section ID (Scroll to Section)",
type: "string",
required: true,
},
{
name: "description",
friendlyName: "Description of the Section",
type: "string",
},
{
name: "blocks",
type: "uiBlocks",
defaultValue: {
blocks: [],
},
helperText:
"This is an editable region where you can drag and drop blocks.",
},
],
},
],
};
export default SeoSectionConfig;
code :-
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { BuilderElement } from "@builder.io/react";
import { BuilderBlocks } from "@builder.io/react";
import React from "react";
import BlogNavigationSidebar from "../BlogNavigationSidebar";
import StickyAnchorWrapper from "../StickyAnchorWrapper";
export interface SEOSectionProps {
heading: string;
subheading: string;
links?: {
anchorlinktext: string;
sectionid: string;
description: string;
blocks: React.ReactNode[];
}[];
builderBlock: BuilderElement;
}
const SeoSection = ({
heading,
subheading,
links,
builderBlock,
}: SEOSectionProps) => {
return (
<div className='flex min-h-screen w-full flex-col gap-[40px] bg-transparent px-4 py-16 sm:gap-[32px] sm:px-[32px] sm:py-[80px] lg:flex-row lg:gap-[20px] lg:px-[40px]'>
<aside className='flex w-full flex-col gap-6 bg-transparent sm:gap-[32px] lg:w-[47%] lg:gap-[40px]'>
<div className='flex flex-col gap-2 sm:gap-3'>
{heading && (
<h2 className='text-3xl font-medium leading-lg tracking-[-0.02em] text-grey-900'>
{heading}
</h2>
)}
{subheading && (
<p className='text-sm leading-sm text-grey-600'>{subheading}</p>
)}
</div>
<div className='flex flex-col gap-3 sm:gap-4'>
<p className='text-sm leading-sm text-grey-500'>Table of contents</p>
{links && <BlogNavigationSidebar links={links} />}
{links && (
<StickyAnchorWrapper links={links} className='flex lg:hidden' />
)}
</div>
</aside>
<div
id='abc'
className='flex w-full flex-col gap-[28px] bg-transparent sm:gap-[32px] lg:gap-[40px]'
>
{links?.map((link, index) =>
link ? (
<section
key={index}
id={link.sectionid}
className='flex flex-col gap-3'
>
{link?.anchorlinktext && (
<h5 className='text-2xl font-medium tracking-[-0.01em] text-grey-900'>
{link.anchorlinktext}
</h5>
)}
{link?.description && (
<p className='text-base font-normal leading-base text-grey-700'>
{link.description}
</p>
)}
<BuilderBlocks
child
parentElementId={builderBlock?.id}
blocks={links[index].blocks}
dataPath={`links.${index}.blocks`}
/>
</section>
) : null,
)}
</div>
</div>
);
};
export default SeoSection;
builder screen
before addign block :-
after adding block:-
can someone plz help