tabler/shared/components/layout/PageHeader.astro

---
// Layout front-matter flags are plain props here.
// TODO: layout-navbar-overlap && layout-navbar-dark → extra text-white class
// on .page-header — both unset on the homepage.
import HeaderActionsButtons from './HeaderActionsButtons.astro';
import HeaderActionsPrint from './HeaderActionsPrint.astro';
import HeaderActionsPhotos from './HeaderActionsPhotos.astro';
import HeaderActionsBreadcrumb from './HeaderActionsBreadcrumb.astro';
import HeaderActionsAddBoard from './HeaderActionsAddBoard.astro';
import HeaderActionsAddJob from './HeaderActionsAddJob.astro';
import HeaderActionsUsers from './HeaderActionsUsers.astro';
import HeaderProfile from './HeaderProfile.astro';
import HeaderUptime from './HeaderUptime.astro';

interface Props {
	/** page-header — the page title; without it the whole block is not rendered */
	title?: string | undefined;
	/** page-header-pretitle */
	pretitle?: string | undefined;
	/** page-header-description */
	description?: string | undefined;
	/** page-header-actions — name of an include from layout/header-actions/, e.g. "buttons" */
	actions?: string | undefined;
	/** page-header-class */
	class?: string;
	/** page-header-file — name of an include from layout/headers/, e.g. "profile" */
	file?: string | undefined;
	/** layout-navbar-overlap && layout-navbar-dark → text-white on .page-header */
	textWhite?: boolean | undefined;
}

const { title, pretitle, description, actions, class: className, file, textWhite } = Astro.props;
---

{file === 'profile' && <HeaderProfile />}
{file === 'uptime' && <HeaderUptime />}
{
	!file && title && (
		<div class={`page-header${className ? ` ${className}` : ''} d-print-none${textWhite ? ' text-white' : ''}`}>
			<div class="container-xl">
				<div class="row g-2 align-items-center">
					<div class="col">
						{pretitle && (
							<Fragment>
								<!-- Page pre-title -->
								<div class="page-pretitle">{pretitle}</div>
							</Fragment>
						)}
						<h1 class="page-title">
							{title}
						</h1>

						{description && <div class="text-secondary mt-1">{description}</div>}
					</div>

					{actions && (
						<Fragment>
							<!-- Page title actions -->
							<div class="col-auto ms-auto d-print-none">
								{actions === 'buttons' && <HeaderActionsButtons dark={textWhite} />}
								{actions === 'print' && <HeaderActionsPrint />}
								{actions === 'photos' && <HeaderActionsPhotos />}
								{actions === 'breadcrumb' && <HeaderActionsBreadcrumb />}
								{actions === 'add-board' && <HeaderActionsAddBoard />}
								{actions === 'add-job' && <HeaderActionsAddJob />}
									{actions === 'users' && <HeaderActionsUsers />}
							</div>
						</Fragment>
					)}
				</div>
			</div>
		</div>
	)
}