27 lines
836 B
TypeScript
27 lines
836 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>
|
|
)
|
|
}
|