42 lines
1,014 B
TypeScript
42 lines
1,014 B
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, type ReactNode } from 'react';
|
||
|
|
import { usePageHeader } from './PageHeaderContext';
|
||
|
|
|
||
|
|
interface SetPageHeaderProps {
|
||
|
|
title: string;
|
||
|
|
subtitle?: string;
|
||
|
|
crumbs?: string[];
|
||
|
|
actions?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Call inside a page component to set the TopBar's title/subtitle/crumbs.
|
||
|
|
* Renders a visually-hidden heading for accessibility and tests.
|
||
|
|
*/
|
||
|
|
export function SetPageHeader({ title, subtitle, crumbs, actions }: SetPageHeaderProps) {
|
||
|
|
const { setHeader } = usePageHeader();
|
||
|
|
useEffect(() => {
|
||
|
|
setHeader({ title, subtitle, crumbs, actions });
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [title, subtitle, crumbs?.join(',')]);
|
||
|
|
return (
|
||
|
|
<h1
|
||
|
|
aria-hidden="false"
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
width: 1,
|
||
|
|
height: 1,
|
||
|
|
padding: 0,
|
||
|
|
margin: -1,
|
||
|
|
overflow: 'hidden',
|
||
|
|
clip: 'rect(0,0,0,0)',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
border: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</h1>
|
||
|
|
);
|
||
|
|
}
|