1
import type { ReactNode } from "react";
2
 
3
interface PageHeaderProps {
4
  label?: string;
5
  title: string;
6
  description?: string;
7
  actions?: ReactNode;
8
}
9
 
10
export const PageHeader = ({ label, title, description, actions }: PageHeaderProps) => (
11
  <div className="flex items-start justify-between gap-4">
12
    <div>
13
      {label ? <p className="text-sm font-medium uppercase tracking-[0.22em] text-accent-300">{label}</p> : null}
14
      <h1 className={["font-display text-2xl font-bold tracking-tight text-zinc-100", label ? "mt-2" : ""].join(" ")}>
15
        {title}
16
      </h1>
17
      {description ? <p className="mt-3 max-w-2xl text-sm leading-6 text-zinc-400">{description}</p> : null}
18
    </div>
19
    {actions ? <div className="flex flex-wrap gap-3">{actions}</div> : null}
20
  </div>
21
);