How can I convert a section modal to a symbol

Technical Questions
1

I have implemented a code page in my next app. Then I created a modal section and link it with that now I want to convert it in symbol. So I can use it my whole app

builder.init(process.env.NEXT_PUBLIC_BUILDERIO_PUBLIC_API_KEY || "");

export async function getStaticProps({}: // params,
Params): Promise<{ props: Props; revalidate: number }> {
  // Fetch the builder content

  // const urlPath = "/" + (params?.slug?.join("/") || "");
  //if (urlPath === "/") {
  let appBarData = null;
  const response = await getAppBarItemHandler()
    .then((appBar) => {
      appBarData = appBar;
      console.log("appBarData", appBarData);
    })
    .catch((error) => {
      console.log(
        "🚀 ~ file: DuploAppBar.tsx:121 ~ getAllAppBar ~ error:",
        error
      );
    });
  let navbar = null;
  navbar = await builder.get("navbar").toPromise();

  return {
    props: {
      appBarData: appBarData || null,
      page: navbar || null,
    },
    revalidate: 5,
  };
}

export default function Page({ page, appBarData }: Props): JSX.Element {
  const router: NextRouter = useRouter();
  const isPreviewing: boolean = useIsPreviewing();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }

  return (
    <>
      <Head>
        <title>{page?.data.title}</title>
      </Head>

      <BuilderComponent
        model="symbol"
        content={page}
        data={{ navbar: appBarData }}
      />
    </>
  );
}

Screenshot 2023-07-20 at 5.42.56 PM
Screenshot 2023-07-20 at 5.42.56 PM622×504 15.8 KB

2

For sure! We have some great documentation on how you can take your section to create and use it as a symbol. This can be found here below:

3

@nicke920 I’m sorry but there’s no information or examples on how to convert a section that is in Section models to a symbol.

Is there a way to do it?