components/page-head/page-head.react.tsx

Functions

Imports

It imports components/breadcrumb/breadcrumb.react.tsx. No module of this repo imports it.

Source

1import type { ReactNode } from "react";
2import { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from "../breadcrumb/breadcrumb.react.tsx";
3
4export interface PageHeadProps {
5  // Levels above this page, first to current. Fewer than two levels draws no trail (a hub).
6  crumbs?: BreadcrumbItem[];
7  // Draw a trail link with the app's router link; passed to the Breadcrumb.
8  renderLink?: BreadcrumbProps["renderLink"];
9  // The page's one h1.
10  title: ReactNode;
11  // One line saying what the page is for.
12  lead?: ReactNode;
13  // The page's actions, at the right (buttons and links).
14  actions?: ReactNode;
15}
16
17// The HTML contract in page-head.md.
18export function PageHead({ crumbs, renderLink, title, lead, actions }: PageHeadProps) {
19  return (
20    <header className="cap-page-head">
21      <div className="cap-page-head-text">
22        {crumbs && crumbs.length > 1 ? <Breadcrumb items={crumbs} renderLink={renderLink} /> : null}
23        <h1 className="cap-page-head-title">{title}</h1>
24        {lead ? <p className="cap-page-head-lead">{lead}</p> : null}
25      </div>
26      {actions ? <div className="cap-page-head-actions">{actions}</div> : null}
27    </header>
28  );
29}