fix: 💄 fix minor ui issue n add documentation

package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -44,4 +44,4 @@
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
   }
-}
+}

readme.md

@@ -1 +1,12 @@
-# Slack Blocks to JSX
+# Slack Blocks to JSX
+
+### How to use
+
+1. Install the Library
+2. Import the CSS file in your entry point file `import "slack-blocks-to-jsx/dist/style.css"`
+3. Import the component and use it `import { Message } from "slack-blocks-to-jsx"`
+4. (optional) import the Block type to define the blocks for better type safety :)
+
+   `import type { Block } from "slack-blocks-to-jsx"`
+
+   `const blocks: Block[] = [...your slack blocks]`

src/header.tsx

@@ -11,7 +11,7 @@ export const Header = (props: Props) => {
   return (
     <div className="flex gap-[5px] items-center w-full">
       <h3 className="font-black text-[15px]">{name}</h3>
-      <div className="h-[14px] w-[25.31px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px]">
+      <div className="h-[14px] w-[27px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px] text-center">
         APP
       </div>
       <div className="text-xs text-black-secondary uppercase leading-[17.6px]">

src/message.tsx

@@ -4,7 +4,14 @@ import { getBlockComponent } from "./components";
 import { BlockWrapper } from "./block_wrapper";
 
 type Props = {
+  /**
+   * Not yet implemented.
+   */
   theme?: "light" | "dark";
+  /**
+   * Show a link to open the message in the Slack Block Kit Builder, for debugging purposes. Defaults to false.
+   */
+  showBlockKitDebug?: boolean;
   blocks: Block[];
   logo: string;
   name: string;
@@ -14,10 +21,34 @@ type Props = {
 };
 
 export const Message = (props: Props) => {
-  const { theme = "light", blocks, logo, name, time = new Date(), className = "", style } = props;
+  const {
+    blocks,
+    logo,
+    name,
+    time = new Date(),
+    className = "",
+    style,
+    showBlockKitDebug = false,
+  } = props;
 
   return (
-    <section className={`flex gap-2 w-full max-w-[600px] slack-message ${className}`} style={style}>
+    <section
+      className={`flex gap-2 w-full max-w-[600px] slack-message relative ${className}`}
+      style={style}
+    >
+      {showBlockKitDebug && (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={`https://app.slack.com/block-kit-builder#${encodeURIComponent(
+            JSON.stringify({ blocks }),
+          )}`}
+          className="text-xs absolute right-0 top-0 text-blue-500 underline"
+        >
+          Open in Slack Block Kit Builder
+        </a>
+      )}
+
       <div className="shrink-0">
         <img src={logo} className="w-9 h-9" alt={name} />
       </div>