re-added PageBodyHeader

Author: marcus-wishes

library/src/layouting/PageLayout.tsx

@@ -22,19 +22,23 @@ const Page = ({
 )
 
 const PageHeader = ({
+	shadow = true,
 	children,
 	id,
 	className,
 	style,
 }: {
+	shadow?: boolean
 	children: React.ReactNode
 	id?: string
 	className?: string
 	style?: React.CSSProperties
 }) => (
 	<div
 		className={twMerge(
-			"border-border bg-neutral-subtle z-0 flex w-full flex-col border-b pl-5 pr-3 pt-5 shadow-md",
+			`border-border bg-neutral-subtle z-0 flex w-full flex-col border-b pl-5 pr-3 pt-5 ${
+				shadow ? "shadow-md" : ""
+			}`,
 			className,
 		)}
 		id={id}
@@ -146,6 +150,29 @@ const PageBodyContent = ({
 	</div>
 )
 
+const PageBodyHeader = ({
+	children,
+	id,
+	className,
+	style,
+}: {
+	children: React.ReactNode
+	id?: string
+	className?: string
+	style?: React.CSSProperties
+}) => (
+	<div
+		className={twMerge(
+			"bg-neutral-subtle z-0 pb-2 pl-4 pr-3 pt-3 shadow-md",
+			className,
+		)}
+		id={id}
+		style={style}
+	>
+		{children}
+	</div>
+)
+
 const PageBodyFooter = ({
 	children,
 	id,
@@ -176,6 +203,7 @@ const PageLayout = {
 	PageHeaderSubTitle,
 	PageBody,
 	PageBodyContent,
+	PageBodyHeader,
 	PageBodyFooter,
 	PageHeaderLine,
 }

showcase/src/components/showcase/wrapper/PageLayoutShowcase.tsx

@@ -45,6 +45,45 @@ function PageLayoutExample() {
 	//#endregion pagelayout
 }
 
+function PageLayoutExampleWithBodyHeader() {
+	//#region pagelayoutwithbodyheader
+	return (
+		<div
+			style={{
+				height: "40vh",
+			}}
+		>
+			<PageLayout.Page>
+				<PageLayout.PageHeader shadow={false}>
+					<PageLayout.PageHeaderTitle>
+						<h1>Page Header Title</h1>
+					</PageLayout.PageHeaderTitle>
+					<PageLayout.PageHeaderSubTitle>
+						<h2>Page Header Sub Title</h2>
+					</PageLayout.PageHeaderSubTitle>
+					<PageLayout.PageHeaderLine>
+						<div>Page Header Line</div>
+						<div>Page Header Line</div>
+						<div>Page Header Line</div>
+					</PageLayout.PageHeaderLine>
+				</PageLayout.PageHeader>
+				<PageLayout.PageBody>
+					<PageLayout.PageBodyHeader>
+						Body Header
+					</PageLayout.PageBodyHeader>
+					<PageLayout.PageBodyContent>
+						Body Content
+					</PageLayout.PageBodyContent>
+					<PageLayout.PageBodyFooter>
+						Page Body Footer
+					</PageLayout.PageBodyFooter>
+				</PageLayout.PageBody>
+			</PageLayout.Page>
+		</div>
+	)
+	//#endregion pagelayoutwithbodyheader
+}
+
 export default function PageLayoutShowcase(props: ShowcaseProps) {
 	return (
 		<ShowcaseWrapperItem
@@ -62,6 +101,11 @@ export default function PageLayoutShowcase(props: ShowcaseProps) {
 					example: <PageLayoutExample />,
 					sourceCodeExampleId: "pagelayout",
 				},
+				{
+					title: "Page Layout With Body Header",
+					example: <PageLayoutExampleWithBodyHeader />,
+					sourceCodeExampleId: "pagelayoutwithbodyheader",
+				},
 			]}
 		/>
 	)