27 lines
844 B
TypeScript
27 lines
844 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
type PageHeadingProps = {
|
|
title: string;
|
|
description?: string;
|
|
eyebrow?: string;
|
|
leading?: ReactNode;
|
|
actions?: ReactNode;
|
|
};
|
|
|
|
/** A flat, shared page title. Panels belong to the content below it. */
|
|
export default function PageHeading({ title, description, eyebrow, leading, actions }: PageHeadingProps) {
|
|
return (
|
|
<header className="page-heading">
|
|
<div className="page-heading-main">
|
|
{leading && <div className="page-heading-leading">{leading}</div>}
|
|
<div className="page-heading-copy">
|
|
{eyebrow && <span className="page-heading-eyebrow">{eyebrow}</span>}
|
|
<h1>{title}</h1>
|
|
{description && <p>{description}</p>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="page-heading-actions">{actions}</div>}
|
|
</header>
|
|
);
|
|
}
|