Merge pull request #29 from babylonlabs-io/remove-body-selector

fix: dialog title
babylonlabs-io · Nov 23, 2024 · 79ae0b7 · 79ae0b7
2 parents 043a447 + 3c7ae5e
commit 79ae0b7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/.changeset/clever-trains-relax.md 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
@@ -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
@@ -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}
+  </>
 );