create HeadingComponent

components/HeadingComponent.tsx

@@ -0,0 +1,34 @@
+import { ComponentConfig } from "@measured/puck";
+import React from "react";
+
+export type HeadingComponentProps = {
+  text: string,
+  textAlign: any,
+};
+
+function HeadingComponent({text, textAlign}: HeadingComponentProps){
+  return ( 
+    <div style={{padding: 64}}>
+      <h1 style={{ textAlign }}>{text}</h1>
+    </div> 
+  )
+};
+
+export const headingComponentConfig: ComponentConfig<HeadingComponentProps> = {
+  render: HeadingComponent,
+  fields:{
+    text: {type: "text"},
+    textAlign: {
+      type: "radio",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Center", value: "center" },
+        { label: "Right", value: "right" },
+      ],
+    },
+  },
+  defaultProps: {
+    text: "HeadingComponent",
+    textAlign: "center",
+  }
+}

puck.config.tsx

@@ -1,8 +1,11 @@
 import type { Config } from "@measured/puck";
 import type { TextProps } from "./components/Text";
 import Text from "./components/Text";
+import type { HeadingComponentProps } from "./components/HeadingComponent";
+import { headingComponentConfig } from "./components/HeadingComponent";
 
 type Props = {
+  HeadingComponent: HeadingComponentProps
   HeadingBlock: { title: string };
   Text: TextProps;
 };
@@ -30,6 +33,7 @@ export const config: Config<Props> = {
         </div>
       ),
     },
+    HeadingComponent: headingComponentConfig,
   },
 };