claude-harness/skills/aura-design/kit/ui/PageHeader.tsx

import type { ReactNode } from "react";

export function PageHeader({ title, subtitle, actions, children }: { title: ReactNode; subtitle?: ReactNode; actions?: ReactNode; children?: ReactNode }) {
  return (
    <header className="ui-page-header">
      <div className="ui-page-header__row">
        <div className="ui-page-header__text">
          <h1 className="ui-page-header__title">{title}</h1>
          {subtitle && <p className="ui-page-header__subtitle">{subtitle}</p>}
        </div>
        {actions && <div className="ui-page-header__actions">{actions}</div>}
      </div>
      {children}
    </header>
  );
}