💄 style: Update ChatHeader

bentwnghk · Jun 29, 2024 · b527ba6 · b527ba6
1 parent ea85e6a
commit b527ba6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/ChatHeader/index.tsx b/src/ChatHeader/index.tsx
@@ -11,34 +11,37 @@ import { useStyles } from './style';
 
 export interface ChatHeaderProps extends DivProps {
   classNames?: {
+    center?: string;
     left?: string;
     right?: string;
   };
-  contentStyles?: {
-    left?: CSSProperties;
-    right?: CSSProperties;
-  };
   gap?: {
+    center?: number;
     left?: number;
     right?: number;
   };
-
   left?: ReactNode;
   onBackClick?: () => void;
   right?: ReactNode;
   showBackButton?: boolean;
+  styles?: {
+    center?: CSSProperties;
+    left?: CSSProperties;
+    right?: CSSProperties;
+  };
 }
 const ChatHeader = memo<ChatHeaderProps>(
   ({
     left,
     right,
     className,
     style,
-    contentStyles,
+    styles: contentStyles,
     classNames,
     showBackButton,
     onBackClick,
     gap,
+    children,
   }) => {
     const { cx, styles } = useStyles();
 
@@ -68,6 +71,17 @@ const ChatHeader = memo<ChatHeaderProps>(
           )}
           {left}
         </Flexbox>
+        {children && (
+          <Flexbox
+            align={'center'}
+            className={cx(styles.center, classNames?.center)}
+            gap={gap?.center || 12}
+            horizontal
+            style={contentStyles?.center}
+          >
+            {children}
+          </Flexbox>
+        )}
         <Flexbox
           align={'center'}
           className={cx(styles.right, classNames?.right)}

diff --git a/src/ChatHeader/style.ts b/src/ChatHeader/style.ts
@@ -3,6 +3,10 @@ import { rgba } from 'polished';
 
 export const useStyles = createStyles(({ css, token, stylish, cx }) => {
   return {
+    center: css`
+      position: relative;
+      overflow: hidden;
+    `,
     container: cx(
       stylish.blurStrong,
       css`