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: "list",
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",
},
],
},
],
canHaveChildren: true,
defaultChildren: [
{
"@type": "@builder.io/sdk:Element",
component: {
name: "Text",
options: {
text: "This is a default child block.",
},
},
},
],
};
export default SeoSectionConfig;
component code :-
import { withChildren } from "@builder.io/react";
import React from "react";
import type { PropsWithChildren, ReactNode } from "react";
import BlogNavigationSidebar from "../BlogNavigationSidebar";
import StickyAnchorWrapper from "../StickyAnchorWrapper";
export interface SEOSectionProps extends PropsWithChildren {
heading: string;
subheading: string;
links?: {
anchorlinktext: string;
sectionid: string;
description: string;
additionalContent?: ReactNode;
}[];
}
const SeoSection = ({
heading,
subheading,
links,
...props
}: 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 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>
)}
{/* Render additional content dynamically */}
{link.additionalContent && (
<div className='mt-4'>{link.additionalContent}</div>
)}
</section>
</>
),
)}
{props.children}
</div>
</div>
);
};
// export default SeoSection;
// IMPORTANT: withChildren is required to enable child block functionality
export const HeroWithBuilderChildren = withChildren(SeoSection);
i with above config file i can add only one childern into my custom component
so i want like whenever someone add any link then below on that i can anything from builder