spb/fetcha

1import * as React from "react";2import { cn } from "@/lib/utils";34export function PageHeader({ title, description, actions, className, eyebrow }: { title: React.ReactNode; description?: React.ReactNode; actions?: React.ReactNode; className?: string; eyebrow?: React.ReactNode }) {5  return (6    <div className={cn("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between mb-6", className)}>7      <div className="min-w-0">8        {eyebrow ? <div className="mb-1 text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle">{eyebrow}</div> : null}9        <h1 className="text-xl font-semibold tracking-tight sm:text-[22px]">{title}</h1>10        {description ? <p className="mt-1 max-w-2xl text-[13.5px] text-fg-muted leading-relaxed">{description}</p> : null}11      </div>12      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}13    </div>14  );15}1617export function SectionTitle({ children, className, right }: { children: React.ReactNode; className?: string; right?: React.ReactNode }) {18  return (19    <div className={cn("mb-3 flex items-center justify-between gap-3", className)}>20      <h2 className="text-[13px] font-semibold uppercase tracking-wide text-fg-subtle">{children}</h2>21      {right}22    </div>23  );24}25