feat: ✨ add support for header block

package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

readme.md

@@ -79,7 +79,7 @@ Each Slack block type has a corresponding component:
 - `Context` (✅ supported)
 - `Actions` (🟨 partially supported)
 - `File` (❌ not supported yet)
-- `Header` (❌ not supported yet)
+- `Header` (✅ supported)
 - `Input` (🟨 partially supported)
 - `RichText` (✅ supported)
 - `Video` (✅ supported)

src/components/blocks/header.tsx

@@ -1,11 +1,18 @@
 import { HeaderBlock } from "../../types";
+import { TextObject } from "../composition_objects";
 
 type HeaderProps = {
   data: HeaderBlock;
 };
 
 export const Header = (props: HeaderProps) => {
-  const { type } = props.data;
+  const { text, block_id } = props.data;
 
-  return null;
+  return (
+    <div id={block_id} className="mt-1 slack_blocks_to_jsx__header">
+      <h3 className="text-header font-bold slack_blocks_to_jsx__header_heading">
+        <TextObject data={text} />
+      </h3>
+    </div>
+  );
 };

src/components/index.tsx

@@ -32,9 +32,11 @@ export const getBlockComponent = (block: Block): ReactNode => {
   if (block.type === "context") return <Context data={block} />;
   if (block.type === "actions") return <Actions data={block} />;
   if (block.type === "file") return <File data={block} />;
+  // ✅ DONE
   if (block.type === "header") return <Header data={block} />;
   // ✅ PARTIALLY DONE
   if (block.type === "input") return <Input data={block} />;
+  // ✅ DONE
   if (block.type === "video") return <Video data={block} />;
   // ✅ DONE
   if (block.type === "rich_text") return <RichText data={block} />;

tailwind.config.js

@@ -40,6 +40,7 @@ module.exports = {
 			fontSize: {
 				"small": ["13px", "1.38461538"],
 				"base": ["15px", "1.46668"],
+				"header": ["18px", "1.33334"],
 			},
 			backgroundImage: {
 				"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",