From 3c7ae5e0a81387daf7be8cd848ed894912076b1e Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Sat, 23 Nov 2024 22:36:35 +0500
Subject: [PATCH] fix: dialog title

---
 .changeset/clever-trains-relax.md             |  5 +++
 src/components/Dialog/Dialog.stories.tsx      |  3 +-
 .../Dialog/components/DialogHeader.tsx        | 33 +++++++++++--------
 3 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/clever-trains-relax.md

diff --git a/.changeset/clever-trains-relax.md b/.changeset/clever-trains-relax.md
new file mode 100644
index 0000000..4bdea9b
--- /dev/null
+++ b/.changeset/clever-trains-relax.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+fix dialog subtitle
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
index 1492120..1bc7e57 100644
--- a/src/components/Dialog/Dialog.stories.tsx
+++ b/src/components/Dialog/Dialog.stories.tsx
@@ -41,12 +41,13 @@ export const Default: Story = {
           }}
         >
           <DialogHeader
+            title="Bitcoin Inscriptions"
             className="b-text-primary-main"
             onClose={() => {
               setVisibility(false);
             }}
           >
-            Bitcoin Inscriptions
+            <Text>Subtitle</Text>
           </DialogHeader>
 
           <DialogBody className="b-pb-8 b-pt-4 b-text-primary-dark">
diff --git a/src/components/Dialog/components/DialogHeader.tsx b/src/components/Dialog/components/DialogHeader.tsx
index 1d7d949..e597bc6 100644
--- a/src/components/Dialog/components/DialogHeader.tsx
+++ b/src/components/Dialog/components/DialogHeader.tsx
@@ -5,22 +5,27 @@ import { Heading } from "@/components/Heading";
 import { IconButton } from "@/components/Button";
 
 export interface DialogHeaderProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  title: string;
   onClose?: () => void;
 }
 
-export const DialogHeader = ({ className, children, onClose }: DialogHeaderProps) => (
-  <div className={twJoin("bbn-dialog-header", className)}>
-    <Heading variant="h5">{children}</Heading>
+export const DialogHeader = ({ className, children, title, onClose }: DialogHeaderProps) => (
+  <>
+    <div className={twJoin("bbn-dialog-header", className)}>
+      <Heading variant="h5">{title}</Heading>
 
-    {Boolean(onClose) && (
-      <IconButton className="shrink-0" onClick={onClose}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <path
-            d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
-            fill="currentColor"
-          />
-        </svg>
-      </IconButton>
-    )}
-  </div>
+      {Boolean(onClose) && (
+        <IconButton className="shrink-0" onClick={onClose}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
+              fill="currentColor"
+            />
+          </svg>
+        </IconButton>
+      )}
+    </div>
+
+    {children}
+  </>
 );