feat: use composition for page layout components

src/layouts/page-layout.jsx

@@ -6,34 +6,39 @@
  */
 
 import { Content, Theme } from '@carbon/react';
-import { Suspense } from 'react';
+import { Children, Suspense } from 'react';
 import { Nav } from '../components/nav/Nav';
 import classNames from 'classnames';
 import { useThemeContext } from '../context/ThemeContext';
 
-export const PageLayout = ({
-  children,
-  className,
-  fallback,
-  renderPageHeader,
-}) => {
+export const PageLayout = ({ children, className, fallback }) => {
   const { theme } = useThemeContext();
+  const childArray = Children.toArray(children);
+  console.log(childArray);
+  const otherChildren = childArray.filter(
+    (child) => child.type !== PageLayoutHeader,
+  );
+  const Header = childArray.find((child) => child.type === PageLayoutHeader);
+
+  console.log(Header);
 
   return (
     <Suspense fallback={fallback}>
       <div className={classNames('cs--page-layout', className)}>
         <Nav />
         <Theme theme={theme} as={Content}>
           <div className="cs--page-layout__content">
-            {renderPageHeader && (
-              <div className="cs--page-layout__content-header">
-                {renderPageHeader()}
-              </div>
-            )}
-            <div className="cs--page-layout__content-body">{children}</div>
+            {Header}
+            <div className="cs--page-layout__content-body">{otherChildren}</div>
           </div>
         </Theme>
       </div>
     </Suspense>
   );
 };
+
+const PageLayoutHeader = ({ children }) => (
+  <div className="cs--page-layout__content-header">{children}</div>
+);
+PageLayoutHeader.displayName = 'PageLayoutHeader';
+PageLayout.Header = PageLayoutHeader;

src/pages/dashboard/Dashboard.jsx

@@ -9,6 +9,7 @@ import { Column, Grid, Tile } from '@carbon/react';
 
 import { Footer } from '../../components/footer/Footer';
 import { PageLayout } from '../../layouts/page-layout';
+import { PageHeader } from '@carbon/ibm-products';
 
 // The styles are imported into index.scss by default.
 // Do the same unless you have a good reason not to.
@@ -32,6 +33,9 @@ const Dashboard = () => {
       className="cs--dashboard"
       fallback={<p>Loading dashboard page...</p>}
     >
+      <PageLayout.Header>
+        <PageHeader title="Dashboard" />
+      </PageLayout.Header>
       <Grid>
         <NumberTile />
         <NumberTile />