refactor: use PageHeader component in layout (#1324)

Author: paanSinghCoder

sdks/js/packages/core/react/components/Layout/index.tsx

@@ -1,19 +1,23 @@
-import { Flex, Text } from '@raystack/apsara';
+import { Flex } from '@raystack/apsara';
 import { PropsWithChildren } from 'react';
-import styles from './layout.module.css';
+import { PageHeader } from '../common/page-header';
+import sharedStyles from '../organization/styles.module.css';
 
 interface LayoutProps {
   title: string;
+  description?: string;
 }
 
-export function Layout({ title, children }: PropsWithChildren<LayoutProps>) {
+export function Layout({ title, description, children }: PropsWithChildren<LayoutProps>) {
   return (
     <Flex direction="column" style={{ width: '100%' }}>
-      <Flex className={styles.header}>
-        <Text size="large">{title}</Text>
-      </Flex>
-      <Flex direction="column" gap={9} className={styles.container}>
-        {children}
+      <Flex direction="column" className={sharedStyles.container}>
+        <Flex direction="row" justify="between" align="center" className={sharedStyles.header}>
+          <PageHeader title={title} description={description} />
+        </Flex>
+        <Flex direction="column" gap={9}>
+          {children}
+        </Flex>
       </Flex>
     </Flex>
   );

sdks/js/packages/core/react/index.ts

@@ -22,6 +22,7 @@ export { useBillingPermission } from './hooks/useBillingPermission';
 export { useConnectQueryPolling } from './hooks/useConnectQueryPolling';
 export { usePreferences } from './hooks/usePreferences';
 export { Layout } from './components/Layout';
+export { PageHeader } from './components/common/page-header';
 
 export type {
   FrontierClientOptions,