30 lines
694 B
TypeScript
30 lines
694 B
TypeScript
import { useId } from "react";
|
|
import type { UiModuleBlock } from "../types";
|
|
import { ModuleCard } from "./ModuleCard";
|
|
|
|
export interface DashboardHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
eyebrow?: string;
|
|
module?: UiModuleBlock;
|
|
}
|
|
|
|
export function DashboardHeader({
|
|
title,
|
|
subtitle,
|
|
eyebrow,
|
|
module,
|
|
}: DashboardHeaderProps) {
|
|
const titleId = useId();
|
|
|
|
return (
|
|
<header className="dashboard-header" aria-labelledby={titleId}>
|
|
<div>
|
|
{eyebrow ? <p>{eyebrow}</p> : null}
|
|
<h1 id={titleId}>{title}</h1>
|
|
{subtitle ? <span>{subtitle}</span> : null}
|
|
</div>
|
|
{module ? <ModuleCard module={module} /> : null}
|
|
</header>
|
|
);
|
|
}
|