28 lines
730 B
React
28 lines
730 B
React
import { useEffect, useRef } from "react";
|
|
|
|
/**
|
|
* @param {{
|
|
* title: string,
|
|
* description?: string,
|
|
* eyebrow?: string
|
|
* }} props
|
|
*/
|
|
export function PageHeader({ title, description, eyebrow }) {
|
|
const headingRef = useRef(/** @type {HTMLHeadingElement | null} */ (null));
|
|
|
|
useEffect(() => {
|
|
document.title = `${title} · Frontend Skeleton`;
|
|
headingRef.current?.focus();
|
|
}, [title]);
|
|
|
|
return (
|
|
<header className="page-header">
|
|
{eyebrow ? <p className="page-header__eyebrow">{eyebrow}</p> : null}
|
|
<h1 ref={headingRef} tabIndex={-1} data-route-heading>
|
|
{title}
|
|
</h1>
|
|
{description ? <p className="page-header__description">{description}</p> : null}
|
|
</header>
|
|
);
|
|
}
|