spb/rareindex

1import type { ReactNode } from 'react';23export function PageHeader({ title, description, actions }: { title: ReactNode; description?: ReactNode; actions?: ReactNode }) {4  return (5    <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">6      <div>7        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>8        {description ? <p className="mt-1 max-w-2xl text-sm text-muted">{description}</p> : null}9      </div>10      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}11    </div>12  );13}1415export const btnPrimary = 'inline-flex h-9 items-center gap-1.5 rounded-md bg-accent px-3 text-[13px] font-medium text-accent-fg hover:opacity-90';16export const btnSecondary = 'inline-flex h-9 items-center gap-1.5 rounded-md border border-border bg-elevated px-3 text-[13px] font-medium text-fg hover:bg-inset';17export const btnGhost = 'inline-flex h-8 items-center gap-1 rounded-md px-2 text-xs font-medium text-muted hover:bg-inset hover:text-fg';18export const btnDanger = 'inline-flex h-8 items-center gap-1 rounded-md px-2 text-xs font-medium text-loss hover:bg-loss-bg';19