From 9f5c2f57b0c280b41d1b630f24a1d71805a7036b Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Fri, 20 Sep 2024 20:41:45 +0200
Subject: [PATCH] Page Header: do not add markup if the prop is not passed in

---
 packages/ui/src/makerkit/page.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index fd5a28075..b07c55dbb 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/packages/ui/src/makerkit/page.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { cn } from '../lib/utils';
+import { If } from './if';
 
 export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
 
@@ -108,7 +109,7 @@ export function PageBody(
     className?: string;
   }>,
 ) {
-  const className = cn('w-full flex flex-col flex-1 lg:px-4', props.className);
+  const className = cn('flex w-full flex-1 flex-col lg:px-4', props.className);
 
   return <div className={className}>{props.children}</div>;
 }
@@ -161,8 +162,13 @@ export function PageHeader({
       )}
     >
       <div className={'flex flex-col'}>
-        <PageDescription>{description}</PageDescription>
-        <PageTitle>{title}</PageTitle>
+        <If condition={description}>
+          <PageDescription>{description}</PageDescription>
+        </If>
+
+        <If condition={title}>
+          <PageTitle>{title}</PageTitle>
+        </If>
       </div>
 
       {children}