refactor(ui): extract reusable component package

packages/ui/src/components/DashboardHeader.tsx

@@ -0,0 +1,30 @@
+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>
+  );
+}