Register a block

interface BlockVariant {
  image?: string | JSX.Element; // url of the image or a svg
  name: string; // The name of the component
  component: any; // The component to register
  description?: string; // The description of the component
}

interface BlockMenu {
  name: string;
  variants: BlockVariant[];
}

interface MenuBlockSchema {
  category: string;
  blocks: BlockMenu[];
}

import { MenuBlockSchema } from "@suncel/nextjs";

export const menuBlocks: MenuBlockSchema[] = [
  {
    category: "Blocks",
    blocks: [
      {
        name: "Hero",
        variants: [
          {
            image: "https://assets.suncel.io/61bf5e233c962a862faf209f/hero_comp.png",
            component: Hero,
            name: "Hero",
            description: "Hero description",
          },
          ...
        ],
      },
    ]
      ...
  },
];

// pages/_app.tsx file

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SuncelContext } from "@suncel/nextjs";
import { menuBlocks } from "@/suncel/menuBlocks";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SuncelContext menuBlocks={menuBlocks}>
      <Component {...pageProps} />
    </SuncelContext>
  );
}

export default MyApp;