Blocks > Register 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;