1
import type { ReactNode } from "react";
2
 
3
interface PageHeaderProps {
4
  caption?: string;
5
  captionIcon?: ReactNode;
6
  heading: string;
7
  description?: string;
8
  children?: ReactNode;
9
}
10
 
11
export function PageHeader({ caption, captionIcon, heading, description, children }: PageHeaderProps) {
12
  return (
13
    <div>
14
      {caption ? (
15
        <div className="mb-2 flex items-center gap-1.5">
16
          {captionIcon}
17
          <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{caption}</span>
18
        </div>
19
      ) : null}
20
      <h2 className="text-lg font-semibold text-zinc-100">{heading}</h2>
21
      {description ? <p className="mt-2 text-sm text-zinc-400">{description}</p> : null}
22
      {children}
23
    </div>
24
  );
25
}