fix: improve header component to center the title properly

widget/embedded/src/components/Layout/Layout.tsx

@@ -109,17 +109,15 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       ref={containerRef}>
       <Header
         prefix={
-          <>
-            {showBackButton && (
-              <BackButton
-                onClick={() => {
-                  navigateBack();
-                  // As an example, used in routes page to add a custom logic when navigating back to the home page.
-                  header.onBack && header.onBack();
-                }}
-              />
-            )}
-          </>
+          showBackButton ? (
+            <BackButton
+              onClick={() => {
+                navigateBack();
+                // As an example, used in routes page to add a custom logic when navigating back to the home page.
+                header.onBack && header.onBack();
+              }}
+            />
+          ) : null
         }
         title={header.title}
         suffix={

widget/ui/src/components/Header/Header.stories.tsx → widget/storybook/src/components/Header.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Header } from './Header.js';
+import { Header } from '@rango-dev/ui';
 
 const meta: Meta<typeof Header> = {
   component: Header,

widget/ui/src/components/Header/Header.styles.ts

@@ -14,7 +14,6 @@ export const globalHeaderStyles = globalCss({
 
 export const Container = styled('div', {
   display: 'flex',
-  justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$20 $20 $15 $20',
   $$color: '$colors$neutral100',
@@ -24,6 +23,20 @@ export const Container = styled('div', {
   backgroundColor: '$$color',
   position: 'relative',
 
+  variants: {
+    titlePosition: {
+      left: {
+        justifyContent: 'start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      right: {
+        justifyContent: 'end',
+      },
+    },
+  },
+
   '.rng-curve-left,.rng-curve-right': {
     width: HEADER_CORNDER_RADIUS * 2,
     height: HEADER_CORNDER_RADIUS * 2,
@@ -59,7 +72,17 @@ export const Container = styled('div', {
   },
 });
 
+export const Prefix = styled('div', {
+  position: 'absolute',
+  left: '$20',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+});
+
 export const Suffix = styled('div', {
+  position: 'absolute',
+  right: '$20',
   display: 'flex',
   alignItems: 'center',
   gap: '$5',

widget/ui/src/components/Header/Header.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { Typography } from '../Typography/index.js';
 
-import { Container, globalHeaderStyles, Suffix } from './Header.styles.js';
+import { Container, globalHeaderStyles, Prefix, Suffix } from './Header.styles';
 
 export function Header({
   prefix,
@@ -14,12 +14,33 @@ export function Header({
 }: PropsWithChildren<PropTypes>) {
   globalHeaderStyles();
 
+  const getTitlePosition = () => {
+    if (!prefix) {
+      return 'left';
+    }
+    if (!suffix) {
+      return 'right';
+    }
+    return 'center';
+  };
+
+  const renderTitle = () => {
+    if (!title) {
+      return null;
+    } else if (typeof title === 'string') {
+      return (
+        <Typography variant="headline" size="small">
+          {title}
+        </Typography>
+      );
+    }
+    return title;
+  };
+
   return (
-    <Container>
-      {prefix}
-      <Typography variant="headline" size="small">
-        {title}
-      </Typography>
+    <Container titlePosition={getTitlePosition()}>
+      <Prefix>{prefix}</Prefix>
+      {renderTitle()}
       <Suffix>{suffix}</Suffix>
       <div className="rng-curve-left"></div>
       <div className="rng-curve-right"></div>

widget/ui/src/components/Header/Header.types.ts

@@ -1,5 +1,5 @@
 export interface PropTypes {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
-  title: string;
+  title?: string | React.ReactNode;
 }