1
import { type ReactNode } from "react";
2
 
3
type Props = {
4
  title: ReactNode;
5
  description?: ReactNode;
6
  actions?: ReactNode;
7
  icon?: ReactNode;
8
};
9
 
10
export function PageHeader({ title, description, actions, icon }: Props) {
11
  return (
12
    <header className="mb-6 flex flex-row items-start justify-between gap-4 border-b border-zinc-800/60 pb-6 sm:items-end">
13
      <div className="flex min-w-0 flex-1 items-start gap-4">
14
        {icon ? <div className="mt-1 shrink-0 text-accent-400">{icon}</div> : null}
15
        <div className="min-w-0 space-y-1">
16
          <h1 className="font-display text-3xl font-extrabold tracking-tight text-zinc-50 sm:text-4xl">{title}</h1>
17
          {description ? <p className="max-w-2xl text-sm text-zinc-400 sm:text-base">{description}</p> : null}
18
        </div>
19
      </div>
20
      {actions ? <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div> : null}
21
    </header>
22
  );
23
}